Redux 中如何定义操作？

Redux 是 JavaScript 应用程序的状态管理库。它用于在应用程序中全局管理数据。在 redux 中，基本上分为三个部分：

1. 行动
2. 减速器
3. 店铺

动作：动作是具有信息的 JavaScript 对象。操作为商店提供信息。操作有一个类型字段，用于标识要执行的操作类型，所有其他字段都包含信息或数据。

还有一个术语用于创建动作，称为动作创建者，有一些简单的函数可以创建乐趣并返回动作对象。

句法：

function fun_name(parameters) {
  return { // action object
    type: 'TYPE_NAME', 
    task: task
  }
}

让我们创建一个应用程序来演示如何定义操作：

创建反应应用程序：

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

npx create-react-app example

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

cd example

现在从项目终端的根目录运行以下命令

npm install redux

npm install react-redux

示例：让我们在 redux 的帮助下制作一个简单的 todo 应用程序。

在 src 文件夹中，新建两个文件夹组件和 redux。

在组件中添加两个 jsx 文件

• addTodo.jsx
• listTodo.jsx

在 redux 文件夹中

• 创建一个名为 actions 的文件夹，并在 actions 文件夹中添加一个文件 index.js。
• 创建一个名为 reducer 的文件夹，并在其中添加两个文件 index.js 和 todoreducer.js。
• 创建js文件store.js

项目结构将如下所示：

项目结构

让我们按如下方式制作应用程序的文件：

文件名：src 内的 index.js

Javascript

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

文件名：src 中的 App.js

Javascript

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

     
Todo List
     
     
    
  );
}
  
export default App;

在 components 文件夹中，这些文件如下

文件名：addTodo.jsx

Javascript

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

Javascript

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 文件夹中，这些文件如下

文件名： actions文件夹的 index.js

这里在动作创建者的帮助下定义了两个动作。

Javascript

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

文件名：reducer 文件夹的 todoreducer.js

Javascript

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

文件名：reducer 文件夹的 index.js

Javascript

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

文件名：redux 文件夹中的 store.js

Javascript

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

设置好所有文件后，

从终端运行以下命令以启动应用程序运行

npm start

输出：

输出

这样，我们在上面的示例中添加了两个操作，它们从列表中添加和删除项目。