useReducer介绍

useReducer 是 React 中用于处理复杂状态逻辑的 Hook。它可以帮助你将一个复杂的状态对象分解成更细粒度的子状态，并通过定义动作（actions）来管理这些状态的变化。

具体来说，useReducer 适用于需要多个子状态或者依赖多个操作的场景。它的核心是通过一个 reducer 函数来处理状态的更新，该函数接受当前状态和动作作为参数，并返回新的状态。

核心概念：

1. 分解复杂状态：

   • useReducer 可以将一个大的状态对象拆分成多个小的子状态，每个子状态都可以通过不同的动作进行更新。
   • 这使得对于复杂的状态管理更加清晰和可控，避免了通过多个 useState 去管理不同部分的状态，尤其当状态之间有复杂依赖时。

2. reducer 函数：

   • useReducer 接受一个 reducer 函数，该函数会处理状态更新的逻辑。每次触发一个动作时，reducer 会根据当前状态和动作类型返回新的状态。

3. 动作（Action）：

   • 动作是描述如何更新状态的对象，通常包含 type 属性以及其他的负载数据（payload）。根据动作的类型，reducer 确定如何更新状态。

4. 局部化状态更新：

   • 每个动作都可以专注于更新状态的一部分，避免了对整个状态对象的直接修改。通过这种方式，每个更新操作都变得更加明确和局部化。

示例：

假设我们有一个复杂的状态对象，包含 userInfo 和 theme 两个子状态。我们希望通过不同的动作来更新这些子状态。

import React, { useReducer } from 'react';

// 定义初始状态
const initialState = {
  userInfo: {
    name: '',
    email: ''
  },
  theme: 'light'
};

// 定义 reducer 函数
function reducer(state, action) {
  switch (action.type) {
    case 'SET_USER':
      return {
        ...state,
        userInfo: {
          ...state.userInfo,
          ...action.payload
        }
      };
    case 'TOGGLE_THEME':
      return {
        ...state,
        theme: state.theme === 'light' ? 'dark' : 'light'
      };
    default:
      return state;
  }
}

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

  // 更新用户信息
  const updateUserInfo = () => {
    dispatch({
      type: 'SET_USER',
      payload: { name: 'John', email: 'john@example.com' }
    });
  };

  // 切换主题
  const toggleTheme = () => {
    dispatch({ type: 'TOGGLE_THEME' });
  };

  return (
    <div style={{ background: state.theme === 'light' ? '#fff' : '#333', color: state.theme === 'light' ? '#000' : '#fff' }}>
      <h1>{state.userInfo.name}</h1>
      <p>{state.userInfo.email}</p>
      <button onClick={updateUserInfo}>Update User Info</button>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
}

export default App;