React useReducer 状态管理

深入学习 useReducer Hook，管理复杂的状态逻辑和多个子值。 · 难度：入门 · +15XP

useReducer 是什么？

useReducer 是 useState 的替代方案，适用于状态逻辑较复杂、包含多个子值，或者下一个状态依赖于之前的状态。它接收一个 reducer 函数和初始状态，返回当前状态和一个 dispatch 方法。

1. 基本语法

const [state, dispatch] = useReducer(reducer, initialState);
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

2. 与 useState 对比

3. 实际示例：计数器

下面是一个使用 useReducer 实现的计数器，支持增加、减少和重置。

练习提示

尝试向 reducer 中添加一个新的 action 类型，例如 'double'，使计数翻倍。