React Hooks — useReduceruseReducer 是 React中的高级 hooks 之一，它用来存

useReducer 是 React中的高级 hooks 之一，它用来存储和更新 state，接收当前应用的 state 以及触发的动作 action，并返回最新的 state。（相当于 useState 的升级版，简单场景使用 useState 即可，useReducer 一般在状态逻辑比较复杂、或者多个组件需要进行逻辑共享的时候使用）

参数

useReducer 参数：

reducer 函数，返回一个新的 state
state 初始化的值

useReducer 返回值：

当前的 state
dispatch 函数，更新state，组件会进行重新渲染

代码实现

下面以一个计数器的实现为例，左右两个按钮分别进行 num 值的增加和减少。

引入 useReducer 后，使用 reducer 来维护 num 的值的变化，初始值为 0，点击按钮后，执行 dispatch 方法，改变数据的值，并重新渲染组件

import { useReducer } from 'react';

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

function myFunc() {
  const [num, dispatch] = useReducer(reducer, 0);

  return (
    <div>
      <button onClick={() => dispatch({ type: 'dec' })}>-</button>
      <span>{num}</span>
      <button onClick={() => dispatch({ type: 'add' })}>+</button>
    </div>
  )
}