React-hooks-useReducer

useReducer

这是一个额外的Hooks，在某些特殊场景可能会用到。

• 使用方式

// 使用方式
const [state, dispatch] = useReducer(reducer, initialArg, init);
// 官网示例
function init(initialCount) {
  return {count: initialCount};
}

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    case 'reset':
      return init(action.payload);
    default:
      throw new Error();
  }
}

function Counter({initialCount}) {
  const [state, dispatch] = useReducer(reducer, initialCount, init);
  return (
    <>
      Count: {state.count}
      <button
        onClick={() => dispatch({type: 'reset', payload: initialCount})}>
        Reset
      </button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}


function App() {
  return (
    <Counter initialCount={0}/>
  )
}

// 返回参数详解: useReducer返回一个数组，包含两个数据一个是状态(也就是数据)，另一个则是一个dispatch函数，dispatch调用时要传入一个对象{type: "操作类型"}来执行不同的操作
// 传入参数详解 reducer这里接收一个纯函数，来根据我们调用dispatch时传入的不同操作类型来执行不同操作，第二个传参是默认数据，第三个参数init也是一个函数，可以用来将数据固定的格式化，官网示例中这里是用init来做一个数据初始化操作，将我们创建组件时给入的默认初始数据保存之后，点击按钮dispatch执行init操作
// 第三个形参可传可不传，如果你不需要将数据进行某种格式化操作的话

当我们操作的数据的方式需要多元化时，useState不能满足我们需求时候，useReducer提供给我们更多的数据的可操作性