掌握useReducer，助你解锁 React 状态管理新技能

带你一起手写useReducer

useReducer 是一个 React 钩子，用于管理组件的状态。它接收两个参数：一个 reducer 函数和一个初始状态值。reducer 函数负责根据当前状态和一个动作（action）来计算新的状态值。useReducer 返回一个数组，第一个元素是存储的状态，第二个元素是触发动作的函数。

useReducer 的优势

• 可以实现组件之间状态的共享。
• 可以使用 Redux DevTools 来调试状态变化。
• 可以更轻松地进行测试。

useReducer 的使用场景

• 当组件的状态变得复杂时，可以使用 useReducer 来管理状态。
• 当组件需要与其他组件共享状态时，可以使用 useReducer 来管理状态。
• 当组件需要进行复杂的计算来更新状态时，可以使用 useReducer 来管理状态。

useReducer 的原理

useReducer 的原理很简单，它就是使用一个 reducer 函数来根据当前状态和一个动作（action）来计算新的状态值。reducer 函数是一个纯函数，这意味着它不会产生任何副作用，并且它总是返回相同的结果。

useReducer 的使用方式

useReducer 的使用方式也很简单，只需要在组件中调用 useReducer 函数即可。useReducer 函数会返回一个数组，第一个元素是存储的状态，第二个元素是触发动作的函数。

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

• state：存储的状态。
• dispatch：触发动作的函数。

reducer 函数

reducer 函数是一个纯函数，它接收两个参数：当前状态和一个动作（action）。reducer 函数根据当前状态和动作来计算新的状态值。

function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}

动作（action）

动作（action）是一个对象，它包含一个 type 属性和一个 payload 属性。type 属性指定了动作的类型，payload 属性指定了动作的数据。

const action = {
  type: 'INCREMENT',
  payload: 1
};

触发动作

可以使用 dispatch 函数来触发动作。

dispatch(action);

useReducer 的示例

以下是一个使用 useReducer 的示例：

import React, { useReducer } from 'react';

function App() {
  const [count, dispatch] = useReducer(reducer, 0);

  function reducer(state, action) {
    switch (action.type) {
      case 'INCREMENT':
        return state + 1;
      case 'DECREMENT':
        return state - 1;
      default:
        return state;
    }
  }

  return (
    <div>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
      <span>{count}</span>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button>
    </div>
  );
}

export default App;

这个示例中，我们使用 useReducer 来管理组件的状态。我们定义了一个 reducer 函数来根据当前状态和一个动作（action）来计算新的状态值。我们还定义了一个 dispatch 函数来触发动作。当用户点击按钮时，我们调用 dispatch 函数来触发动作，从而更新组件的状态。