一 介绍

useReducer简单来说是redux的简洁版。 一个的状态管理工具 接下来介绍一下他的基本使用

先了解一些相关的概念

1 reducer： 可以理解成一个函数集合，可以根据传入不同的参数（action）进行不同的处理。 默认接受两个参数，state（你定义的数据），

2 action：定义要处理的行为。传给reducer

二 使用步骤

1 首先确定useReducer的两个核心，state（数据）和reducer（处理函数）

--数据
const initialState = {
  count: 1
}

ruducer处理函数。接收两个参数，

• 一个是你定义数据。
• 另一个是action处理行为对象：一般有一个action.type属性来描述你要做什么，比如你要这个数据＋1，你就可以传action.type='add'。根据传入不同的参数（action）进行不同的处理。

const reducer = (state, action) => {
// 根据action的type属性进行不同的处理,
  switch (action.type) {
    case 'add': {
      return {
        ...state,
        // 注意这里的写法！！不能写 count:count+1
        count:state.count+1
      }
    }
    default: {
      return state
    }
  }
}

为什么这里要写成count:state.count+1，而不是count++。？

本人学识浅薄，我只说个大概。

根据react状态不可变的原则，你修改状态必须先将原来的数据对象保存一份，然后使用你要修改的对象的属性，覆盖原来的属性。

即，先使用扩展运算符将原来的属性展开，...state。这样返回是原来的数据 再从新对count赋值，就可以改变里面的count值，返回的就是修改后的值

2 定义好了reducer和state。就可以使用useReducer了

useReducer接收两个参数 第一个是你自己定义的reducer函数（就是上面那个) 第二个是自己的数据

export default () => {
  const [state, dispatch] = useReducer(reducer, initialState)
  return (
    <div>
      <div>{state.initialState.count}</div>
      //注意这里dispatch分配的函数是需要使用{}进行对象传入
      <button onClick={() => dispatch({ type: 'increment' })}>Button</button>
    </div>
  )
}

用 第一项是state，其中有我们自己定义的数据 state.initialState 第二项是dispatch。你可以理解为一个分配action的函数。我们把需要处里，用对象里面的type属性指定，这样reducer处理函数就能根据传入的type属性值'increment'找到对应的处理方法了。 当然你也可以传递值给reducer，只需要在派发action的时候指定就行了

onClick={() => dispatch({ type: 'increment',data:100 })}

reducer的时候使用传入的数据

case 'add': { return { ...state, count:action.data } }

以上，就是useReducer的用法啦