解释 Redux 中的 reducer 函数及其特性

题目

解释 Redux 中的 reducer 函数及其特性

信息

• 类型：问答
• 难度：⭐

考点

reducer概念,纯函数特性,不可变性原则

快速回答

Redux reducer 是一个纯函数，它根据当前状态和 action 对象计算并返回新的状态。核心特性包括：

• 纯函数：相同输入永远返回相同输出，无副作用
• 不可变性：必须返回全新状态对象而非修改原状态
• 同步执行：不包含异步操作

示例：(state = initialState, action) => newState

解析

1. Reducer 的核心概念

Reducer 是 Redux 状态管理的核心函数，负责处理 action 并更新状态。其函数签名如下：

function reducer(state = initialState, action) {
  // 根据 action.type 处理状态
  return newState;
}

• state：当前状态（首次调用时为初始状态）
• action：包含 type 和 payload 的普通对象
• 必须返回新状态对象，不可直接修改原状态

2. 必须遵守的特性

2.1 纯函数原则

• 禁止修改函数参数（state/action）
• 禁止执行副作用（API 调用、DOM 操作等）
• 禁止调用非纯函数（Date.now()、Math.random()）

2.2 不可变性（Immutability）

正确做法：

// 正确：返回新对象
case 'ADD_ITEM':
  return {
    ...state,
    items: [...state.items, action.payload]
  };

错误做法：

// 错误：直接修改原状态
case 'ADD_ITEM':
  state.items.push(action.payload); // 违反不可变性！
  return state;

3. 完整示例

// 初始状态
const initialState = {
  count: 0,
  todos: []
};

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };

    case 'ADD_TODO':
      return {
        ...state,
        todos: [
          ...state.todos,
          { text: action.payload, completed: false }
        ]
      };

    default:
      return state; // 未匹配 action 时返回原状态
  }
}

4. 最佳实践

• 拆分 reducer：使用 combineReducers 管理大型状态树
• 默认值处理：通过 ES6 默认参数设置初始状态
• 状态归一化：复杂数据使用 ID 索引而非嵌套
• 工具辅助：使用 Immer 或 Redux Toolkit 简化不可变更新

5. 常见错误

• 直接修改状态：导致 Redux 无法检测变化，UI 不更新
• 忘记默认返回：未处理 action 时需返回原状态
• 包含异步逻辑：异步操作应放在 action creator 或中间件中

6. 扩展知识

• Reducer 组合：通过 combineReducers 合并多个 reducer
• Redux Toolkit：使用 createSlice 自动生成 reducer 和 action
• 性能优化：浅比较检测状态变化（React-Redux 的 useSelector）