如何使用 redux 处理更多操作？

在 Redux 中，动作是具有信息的 JavaScript 对象。拥有多个动作将需要多个动作创建者。这些动作在 redux 中应该是唯一的。特别是，必须正确定义动作类型以识别它。

我们将以待办事项列表操作为例。我们将定义和处理一些操作：

• 添加待办事项
• 删除待办事项

让我们创建一个应用程序来演示如何使用 redux 处理更多操作。

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app example

第 2 步：创建项目文件夹（即示例）后，使用以下命令移动到该文件夹：

cd example

第3步：模块安装，现在从终端中项目的根目录，运行以下命令

npm install redux
npm install react-redux

第四步：在 src 文件夹中，新建两个文件夹组件和 redux。在组件中添加两个名为 addTodo.jsx 和 listTodo.jsx 的 jsx 文件。在 redux 文件夹中，创建文件夹名称 actions 并将 index.js 文件添加到其中。然后在 redux 文件夹中创建一个名为 reducer 的文件夹，并添加两个名为 index.js 和 todoreducer.js 的文件。然后在 redux 文件夹中添加 store.js 文件。

项目结构：它看起来像这样。

项目结构

示例：让我们在 redux 的帮助下制作一个简单的 todo 应用程序。在相应的文件中写下以下代码。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { Provider } from 'react-redux';
import App from './App';
import store from '../src/redux/store';
  
ReactDOM.render(
  
    
      
    
  ,
  document.getElementById('root'),
);

应用程序.js

import AddTodo from './components/addTodo';
import ListTodo from './components/listTodo';
  
function App() {
  return (
    

     
Todo List
     
     
    
  );
}
  
export default App;

addTodo.jsx

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { addtodoitem } from '../redux/actions';
  
const AddTodo = () => {
  const [todo, setTodo] = useState('');
  const dispatch = useDispatch();
  return (
    

      
Enter the todo
      
       {
          setTodo(e.target.value);
        }}
      />
       {
          dispatch(
            addtodoitem({
              title: todo,
              done: false,
            }),
          );
          setTodo('');
        }}>
        Add todo
      
    
  );
};
  
export default AddTodo;

listTodo.jsx

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { deltodoitem } from '../redux/actions';
  
const ListTodo = () => {
  const todos = useSelector((state) => state.todo);
  const dispatch = useDispatch();
  return (
    

      {todos.map((todo, index) => (
        

          

            {todo.title}
          
  
           {
              dispatch(deltodoitem(index));
            }}>
            Delete
          
        
      ))}
    
  );
};
  
export default ListTodo;

redux/index.js

const addtodoitem = (item) => {
    return{
    type: "ADD_TODO",
    payload : item,
    };
};
  
const deltodoitem = (id) => {
    return{
    type: "DELETE_TODO",
    payload : id,
    };
};
  
export {addtodoitem,deltodoitem};

减速器/todoreducer.js

const todoreducer = (state = [], action) => {
  if (action.type === 'ADD_TODO') {
    return [...state, action.payload];
  }
  if (action.type === 'DELETE_TODO') {
    return state.filter((item, index) => index !== action.payload);
  }
  
  return state;
};
  
export default todoreducer;

减速器/index.js

import todoreducer from "./todoreducer";
import { combineReducers } from "redux";
  
const rootReducer = combineReducers({
    todo : todoreducer,
})
  
export default rootReducer;

redux/store.js

import rootReducer from "./reducer";
  
import { createStore } from "redux";
  
const store = createStore(rootReducer);
  
export default store;

我们已经定义了actions文件夹的index.js文件的多个actions。他们正在使用 todoreducer 文件来执行 redux 数据状态的更改。这样我们在 redux 中处理多个动作。

运行应用程序的步骤：使用以下命令运行应用程序：

npm start

输出：在这里，当我们在输入框中键入并单击“添加待办事项”按钮时，会调用 ADD_TODO 动作，当我们单击“删除”按钮时，会调用 DELETE_TODO。这种方式能够处理 redux 中的两个或多个动作。