react学习-useReducer

1.简介
在hooks中，可以为函数式组件提供类似Redux的功能，类似于vuex都是提供状态管理的，官方提供两种state管理：useState，useReducer
使用场景：
1.如果说你的state是一个数组或者对象
2.如果你的state变化很复杂，经常一个操作需要修改很多state
3.如果你的应用比较大，希望UI和业务能够分开维护是时候
理解为阉割版的redux
2.代码案例

import React, { useReducer } from "react";

export default function App() {
  // useReducer接收两个参数，第一个参数是reducer函数，第二个参数是初始值

  //   reducer函数接收两个参数，一个state，另外一个是action，然后返回一个state，dispatch
  //   state返回状态中的值，dispatch是一个可以发布事件来更新state的函数
  const [state, dispatch] = useReducer((state, action) => {
    if (action === "add") {
      return state + 1;
    } else if (action === "prep") {
      return state - 1;
    }
    return state;
  }, 0);
  return (
    <div>
      <h2>{state}</h2>
      <button onClick={() => dispatch("add")}>加1</button>
      <button onClick={() => dispatch("prep")}>减1</button>
    </div>
  );
}

案例2：state为复杂对象时

import React, { useReducer } from "react";

export default function App() {
  const initialState = { count: 0 };
  function reducerFun(state, action) {
    switch (action.type) {
      case "add":
        return { count: state.count + 1 };
      case "prep":
        return { count: state.count - 1 };
      default:
        throw Error();
    }
  }

  const [state, dispatch] = useReducer(reducerFun, initialState);
  return (
    <div>
      <h2>{state.count}</h2>
      <button onClick={() => dispatch({ type: "add" })}>加1</button>
      <button onClick={() => dispatch({ type: "prep" })}>减1</button>
    </div>
  );
}