Redux入门：Action和Reducer的编写--React基础理论实操

2023-05-09 12:18:48

Redux中的Action和Reducer：深入理解

在构建大型单页面应用程序时，管理应用程序的状态是一个常见的挑战。Redux是一个流行的前端状态管理库，它提供了一种可预测且可测试的方式来管理应用程序状态。了解Redux的核心概念——Action和Reducer——对于充分利用它的强大功能至关重要。

Action

Action是表示应用程序状态变化的对象。它包含两个关键属性：

type： 一个唯一的字符串，标识Action的类型。
payload： 与Action相关的数据。它可以是任何类型的数据，例如对象、数组或布尔值。

例如，一个Action可以表示用户单击按钮添加新待办事项：

const ADD_TODO = 'ADD_TODO';

const addTodo = (text) => {
  return {
    type: ADD_TODO,
    payload: {
      text,
      completed: false,
    },
  };
};

Reducer

Reducer是处理Action并更新应用程序状态的纯函数。它接受两个参数：

当前状态： 应用程序的当前状态。
Action： 触发状态变化的Action。

Reducer基于Action的type返回一个新的状态对象。例如，一个Reducer可以处理ADD_TODO Action并更新待办事项列表：

const initialState = {
  todos: [],
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TODO:
      return {
        ...state,
        todos: [...state.todos, action.payload],
      };
    default:
      return state;
  }
};

如何编写Action和Reducer

在Redux中，Action和Reducer都是使用纯函数编写的。纯函数的特点是：