React 中 useReducer 的作用和用法是什么？

推荐答案

useReducer 是 React 提供的一个 Hook，用于管理复杂的状态逻辑。它接收一个 reducer 函数和初始状态作为参数，并返回当前状态和一个 dispatch 函数。通过 dispatch 函数，可以触发状态更新，reducer 函数会根据传入的 action 来决定如何更新状态。

const [state, dispatch] = useReducer(reducer, initialState);

本题详细解读

useReducer 的作用

useReducer 主要用于处理复杂的状态逻辑，尤其是当状态更新逻辑较为复杂或状态之间存在依赖关系时。相比于 useState，useReducer 更适合处理多个子值的状态对象，或者当状态更新逻辑需要根据不同的 action 类型来执行不同的操作时。

useReducer 的用法

1. 定义 reducer 函数：reducer 是一个纯函数，接收当前状态和一个 action 对象作为参数，返回新的状态。action 对象通常包含一个 type 字段，用于标识要执行的操作。

   // www.javascriptcn.com code example
   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. 初始化状态：在组件中使用 useReducer 时，需要传入 reducer 函数和初始状态。

   const initialState = { count: 0 };
   const [state, dispatch] = useReducer(reducer, initialState);

3. 触发状态更新：通过调用 dispatch 函数并传入一个 action 对象来触发状态更新。

   <button onClick={() => dispatch({ type: 'increment' })}>+</button>
   <button onClick={() => dispatch({ type: 'decrement' })}>-</button>

示例代码

// www.javascriptcn.com code example
import React, { useReducer } from 'react';

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();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

export default Counter;

在这个示例中，useReducer 用于管理一个简单的计数器状态。通过 dispatch 函数，可以触发 increment 或 decrement 操作来更新状态。