React 中的 useReducer：全面指南

2023-12-10 07:40:40

导言

随着 React 的兴起，状态管理一直是一个备受关注的话题。React Hooks 的引入为我们提供了新的方法来管理状态，其中 useReducer 是一个尤为强大的工具。useReducer 让我们可以将复杂的逻辑封装到一个函数中，从而简化状态管理并提高代码的可读性和可维护性。

什么是 useReducer？

useReducer 是一个 React Hook，它接受一个 reducer 函数和一个初始状态值，并返回一个状态值和一个更新状态的 dispatch 函数。reducer 函数定义了状态如何随着 action 而变化。action 是一个包含要更新状态的信息的对象。

如何使用 useReducer？

使用 useReducer 的基本步骤如下：

定义 reducer 函数： reducer 函数接受当前状态和一个 action，并返回一个新的状态。
创建初始状态值： 定义一个变量来存储组件的初始状态。
调用 useReducer： 在组件内调用 useReducer，传递 reducer 函数和初始状态作为参数。
更新状态： 使用 dispatch 函数来更新状态。dispatch 函数接受一个 action 作为参数，它会调用 reducer 函数来更新状态。

import { useReducer } from 'react';

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

const initialState = 0;

const MyComponent = () => {
  const [count, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
};