useReducer的基本使用

import React, { useReducer } from 'react';

function Reducers () {
  const [count,dispatch] = useReducer((state,avtion) => {
    switch(avtion.type) {
      case 'add': 
        return state+1;
      case 'minus':
        return state-1
      default:
        return state
    }
  },0)
  return (
    <div>
      <div>{count}</div>
      <button onClick={() => {dispatch({type: 'add'})}}>加</button>
      <button onClick={() => {dispatch({type: 'minus'})}}>减</button>
    </div>
  )
}
export default Reducers

　　

useReducer 接受一个 reducer 函数作为参数，reducer 接受两个参数一个是 state 另一个是 action 。然后返回一个状态 count 和 dispath，count 是返回状态中的值，而 dispatch 是一个可以发布事件来更新 state 的。