Redux 实践：深入理解 Action 和 Reducer

前端

2023-09-23 15:55:05

在 Redux 状态管理库中，Action 和 Reducer 扮演着至关重要的角色，它们共同协作，定义了应用程序状态的演变方式。本文旨在深入探讨这两种核心概念，提供清晰的理解和实际应用。

Action：事件的

Action 是一个轻量级的对象，它了一个应用程序中发生的事件。每个 Action 都包含两个关键属性：

类型（type） ：一个字符串，标识 Action 的类型。
有效负载（payload） ：一个可选项，包含与 Action 相关的任何数据。

Reducer：状态的演化引擎

Reducer 是一个纯函数，它接收当前状态和一个 Action 作为参数，并返回一个新的状态。Reducer 负责根据 Action 的类型更新状态，同时保持状态的不可变性。

Action 的设计模式

创建 Action 时，应遵循以下最佳实践：

使用动作类型来表示事件，例如 "ADD_TODO" 或 "REMOVE_TODO"。
尽可能将有效负载保持精简，只包含与 Action 相关的数据。
使用常量或枚举来定义动作类型，以确保类型的一致性和可靠性。

Reducer 的设计模式

设计 Reducer 时，请考虑以下准则：

Reducer 必须是纯函数，这意味着它不应产生副作用或修改外部变量。
状态更新应以不可变的方式进行，即创建新的状态对象，而不是直接修改现有状态。
根据 Action 的类型使用 switch/case 语句来处理不同的 Action。
为未处理的动作类型添加一个 default case，以防止意外行为。

Redux 中的 Action 和 Reducer 交互

Action 和 Reducer 通过 Redux store 进行交互，store 充当单一的真理来源，维护应用程序的当前状态。当一个 Action 分派到 store 时，Redux 会自动查找相应的 Reducer 并调用它。Reducer 返回一个新状态，该状态被存储在 store 中。

实际应用

以下是一个简单的 Redux 状态管理示例：

// Action Creators
const addTodo = text => ({
  type: "ADD_TODO",
  payload: text
});

const removeTodo = id => ({
  type: "REMOVE_TODO",
  payload: id
});

// Reducer
const todos = (state = [], action) => {
  switch (action.type) {
    case "ADD_TODO":
      return [...state, action.payload];
    case "REMOVE_TODO":
      return state.filter(todo => todo.id !== action.payload);
    default:
      return state;
  }
};

// Store
const store = createStore(todos);