redux 为什么要把 reducer 设计成纯函数

发布于 2024-11-24 12:12:52 字数 4107 浏览 6 评论 0

Redux 选择将 reducer 设计为 纯函数 是为了保证整个状态管理的可预测性、可调试性和可维护性。以下是设计 reducer 为纯函数的原因和其优势：

1. 纯函数的定义

纯函数具有以下两个特性：

同样的输入，总是产生同样的输出 ：对于相同的输入参数，纯函数总会返回相同的结果，且不会有副作用。
不改变外部状态 ：纯函数不会修改传入的参数或外部状态，它只返回一个新的状态。

// 纯函数示例
const add = (x, y) => x + y; // 同样的 x 和 y，总会返回相同的结果

而在 Redux 中， reducer 的作用就是根据旧的状态和传入的 action ，返回一个新的状态。为了保证 Redux 的可预测性， reducer 必须是纯函数。

2. 为什么 `reducer` 需要是纯函数

a. 状态的可预测性

因为纯函数总是基于输入返回确定的输出，所以在 Redux 中，如果你向 reducer 输入相同的状态和动作，它总是会返回相同的状态。这样，应用程序的行为是完全可预测的。

const reducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
};

// 传入相同的 state 和 action，总会返回相同的结果
console.log(reducer(0, { type: 'INCREMENT' })); // 1
console.log(reducer(0, { type: 'INCREMENT' })); // 1

这种确定性让应用的调试和测试变得容易——只要你能确保输入是正确的，输出总是可预期的。

b. 调试工具支持

Redux 提供了强大的调试工具，比如 Redux DevTools。由于 reducer 是纯函数，因此你可以轻松地跟踪状态的变化过程，甚至可以回溯（time-travel）或回放（replay）整个状态的变化。

在 Redux DevTools 中，你可以查看应用每次状态更新的过程，甚至可以重演或撤销某些操作，这依赖于 reducer 的纯函数特性。

c. 时间旅行和状态回溯

由于 reducer 是纯函数，可以轻松实现“时间旅行”功能，即恢复到应用某个历史状态并继续执行。在开发或调试应用时，这个功能非常有用。假如 reducer 不是纯函数，其结果可能会因为不可控的副作用而难以回溯。

// 假设我们有一个状态的历史记录
const stateHistory = [
  reducer(0, { type: 'INCREMENT' }),
  reducer(1, { type: 'INCREMENT' }),
  reducer(2, { type: 'DECREMENT' })
];

console.log(stateHistory); // [1, 2, 1]

d. 方便测试

由于 reducer 是纯函数，因此非常容易进行单元测试。你只需要传入一些状态和 action ，验证返回的结果是否正确即可。不需要考虑外部环境（如数据库、API 调用等）带来的副作用。

// reducer 单元测试示例
it('should increment state by 1 when action type is INCREMENT', () => {
  const initialState = 0;
  const action = { type: 'INCREMENT' };
  const newState = reducer(initialState, action);
  expect(newState).toBe(1); // 确保状态更新正确
});

e. 不变性（Immutability）

纯函数的设计要求 reducer 不能直接修改传入的 state 对象，而是返回一个新的状态对象。这样可以防止副作用，使得状态变化过程更加透明和可控。

如果直接修改传入的状态对象，其他引用这个状态的地方也会受到影响，容易导致难以跟踪的问题。
Redux 强调不可变性， reducer 返回一个新的状态对象，避免了状态对象在多处引用中被意外修改。

// 错误：直接修改原始 state
const reducer = (state, action) => {
  switch (action.type) {
    case 'ADD_ITEM':
      state.items.push(action.item); // 修改了原始 state
      return state; // 错误的写法
    default:
      return state;
  }
};

// 正确：返回一个新的状态
const reducer = (state, action) => {
  switch (action.type) {
    case 'ADD_ITEM':
      return {
        ...state,
        items: [...state.items, action.item], // 返回一个新对象
      };
    default:
      return state;
  }
};