正文

揭秘Redux核心：Reducer与Action的协同奥秘

/0 浏览量
0705

Redux 是一个用于管理 JavaScript 应用状态库，它通过不可变数据结构和纯函数来确保状态的可预测性。在 Redux 中，Reducer 和 Action 是两个核心概念，它们协同工作以维护应用的状态。下面，我们将深入探讨这两个概念及其协同工作的奥秘。

Action：状态的触发器

Action 是一个描述发生了什么的普通对象。它是 Redux 状态变化的唯一来源。Action 的目的是描述一个行为，而不是执行这个行为。在 Redux 中，Action 通常具有以下结构：

const ADD_TODO = 'ADD_TODO';

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

在这个例子中，ADD_TODO 是一个字符串，用来标识这个 Action 的类型。addTodo 函数返回一个 Action 对象，其中包含了类型和负载（payload）信息。

Reducer：状态的纯函数

Reducer 是一个接收当前状态和 Action，并返回新的状态的纯函数。在 Redux 中，Reducer 是用来处理 Action 的，并根据 Action 的类型来更新状态。Reducer 的结构如下：

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

在这个例子中，todos 是一个 Reducer 函数，它接收当前状态 state 和一个 Action 对象 action。根据 Action 的类型，Reducer 会返回一个新的状态。在 ADD_TODO 的情况下，Reducer 会将新的 Todo 添加到状态数组中。

Reducer与Action的协同工作

Reducer 和 Action 的协同工作过程如下：

  1. 当用户与界面交互时，会触发一个事件，比如点击按钮。
  2. 事件触发一个 Action Creator 函数，该函数返回一个 Action 对象。
  3. Action 对象被发送到 Redux Store。
  4. Redux Store 调用 Reducer 函数，并将当前状态和 Action 对象作为参数传递给 Reducer。
  5. Reducer 根据 Action 的类型和负载信息，返回一个新的状态。
  6. Redux Store 将新的状态通知给所有订阅了状态变化的组件。
  7. 组件根据新的状态重新渲染。

总结

Reducer 和 Action 是 Redux 的两个核心概念，它们协同工作以维护应用的状态。通过使用纯函数和不可变数据结构，Redux 确保了状态的可预测性和可维护性。了解 Reducer 和 Action 的协同工作原理，对于深入理解 Redux 和编写高效的应用至关重要。

-- 展开阅读全文 --