# 使用 useReducer 管理复杂状态

URL: https://caijiao.org/react/chapter9/use-reducer
Source: docs/react/chapter9/use-reducer.md
Description: useReducer 是 React 中的一个钩子，适用于管理复杂的组件状态。它通过减少组件状态的管理复杂性，使得状态更新逻辑更加可预测和集中。适用于状态变化逻辑复杂或涉及多个子状态的情况。

## 什么是 useReducer？

`useReducer` 是 React 的一个钩子，通常用于管理比 `useState` 更复杂的状态。它类似于 Redux 中的 reducer 概念，允许你通过分发（dispatch）不同的动作（action）来更新状态。这种方式特别适合于处理复杂的状态变化逻辑，尤其是当状态依赖于前一个状态时。

### useReducer 的用法

`useReducer` 接受两个参数：

1. **reducer 函数**：一个函数，它接收当前状态和一个动作作为参数，并返回一个新的状态。
2. **初始状态**：组件的初始状态。

`useReducer` 返回一个包含两个元素的数组：

1. **当前状态**：当前的状态值。
2. **dispatch 函数**：用于分发动作并触发状态更新。

### 示例：计数器应用

```jsx
import React, { useReducer } from 'react';

// 定义初始状态
const initialState = { count: 0 };

// reducer 函数，负责根据 action 更新状态
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter() {
  // 使用 useReducer 管理状态
  const [state, dispatch] = useReducer(reducer, initialState);

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

export default Counter;
````

在这个例子中，`useReducer` 管理了一个计数器的状态，`reducer` 函数根据传入的 `action` 来决定状态如何变化。通过 `dispatch` 函数发送动作，触发状态的更新。

## useReducer 的优点

* **逻辑集中**：状态更新逻辑被封装在 `reducer` 函数中，便于维护和管理。
* **可预测性**：由于所有的状态更新都通过 `dispatch` 触发，可以确保状态的变更是可预测的。
* **适合复杂状态**：当状态管理涉及多个子状态，或者状态更新需要根据复杂的条件变化时，`useReducer` 是一个更好的选择。

### 示例：处理多种动作的状态更新

```jsx
import React, { useReducer } from 'react';

// 初始状态
const initialState = {
  user: null,
  loading: false,
  error: null,
};

// reducer 函数
function reducer(state, action) {
  switch (action.type) {
    case 'start':
      return { ...state, loading: true };
    case 'success':
      return { ...state, loading: false, user: action.payload };
    case 'failure':
      return { ...state, loading: false, error: action.payload };
    default:
      return state;
  }
}

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

  const fetchUser = async () => {
    dispatch({ type: 'start' });
    try {
      const response = await fetch('/api/user');
      const data = await response.json();
      dispatch({ type: 'success', payload: data });
    } catch (error) {
      dispatch({ type: 'failure', payload: error.message });
    }
  };

  return (
    <div>
      <button onClick={fetchUser} disabled={state.loading}>
        {state.loading ? 'Loading...' : 'Fetch User'}
      </button>
      {state.error && <p>Error: {state.error}</p>}
      {state.user && <p>User: {state.user.name}</p>}
    </div>
  );
}

export default UserProfile;
```

在这个示例中，`useReducer` 被用于处理用户信息的异步请求，并根据请求的结果更新状态。`dispatch` 函数根据不同的动作类型更新状态，如加载中、请求成功或失败。

## 总结

* `useReducer` 是管理复杂状态的好工具，特别适用于涉及多个子状态或复杂更新逻辑的情况。
* `useReducer` 的工作原理类似于 Redux，但它在 React 中是内置的，不需要额外的库。
* 它使得状态更新更加集中、可预测，尤其是对于处理多个动作和依赖于之前状态的场景非常有用。