React Hooks 之 useReducer

useReducer

另外一个可以管理state的hook，常被用来处理复杂的state管理。在实际开发中，基本上普通类型的state，如number, boolean, string等直接使用useState就可以了，涉及到复杂的state一般用useReducer来管理。

useReducer接收两个参数，一个reducer函数，一个初始state，他会返回更新后的state和更新state的方法dispatch

const [state, dispatch] = useReducer(reducer, initialState)
// reducer就是负责管理更新各种状态的函数
// dispatch就是分发函数，传入一个action对象，将action分发到reducer中对应的type中

注意事项：

1. Reducer必须是纯函数，相同的输入必须返回相同的结果，也就是说不能发送请求，不能设置延时，不能触发副作用（side effects）
2. 用action来描述用户的单独行为

//手写的useReducer， 内部也是用useState实现的
export function useReducer(reducer, initialState) {
  const [state, setState] = useState(initialState);

  const dispatch = (action) => {
    const nextState = reducer(initialState, action)
    setState(nextState)
  }

  return [state, dispatch];
}