hooks中 useReducer和useContext结合实现 跨组件通信

import React, { useReducer, useContext } from "react";

// 原始值
const initstate = {
  btn1: "",
  btn2: ""
};

// 创建一个reducer函数来处理 原始值
const reducer = (prevState, action) => {
  // 不改变原始state
  const state = { ...prevState };
  switch (action.type) {
    case "btn1":
      state.btn1 = action.value;
      return state;
    case "btn2":
      state.btn2 = action.value;
      return state;
    default:
      return prevState;
  }
};

// 通过 React.createContext 创建一个全局上下文
const GlobalContext = React.createContext();

function ChildWrap() {
  // 使用useReducer将 reducer和initstate结合
  const [state, dispatch] = useReducer(reducer, initstate);

  // GlobalContext.Provider 向组件内提供value， value里的值是供里面的子组件使用的
  return (
    <GlobalContext.Provider
      value={{
        state,
        dispatch
      }}
    >
      <Btns />
      <Child1 />
      <Child2 />
    </GlobalContext.Provider>
  );
}

function Btns() {
  // GlobalContext.Provider 包着的组件都可以使用useContext来获取value值
  const { dispatch } = useContext(GlobalContext);
  return (
    <>
      <button
        onClick={() => dispatch({ type: "btn1", value: "我被btn1改变了" })}
      >
        Child1
      </button>
      <button
        onClick={() => dispatch({ type: "btn2", value: "我被btn2改变了" })}
      >
        Child2
      </button>
    </>
  );
}

function Child1() {
  // GlobalContext.Provider 包着的组件都可以使用useContext来获取value值
  const { state } = useContext(GlobalContext);
  return <p>child1 - {state.btn1}</p>;
}

function Child2() {
  // GlobalContext.Provider 包着的组件都可以使用useContext来获取value值
  const { state } = useContext(GlobalContext);
  return <p>child2 - {state.btn2} </p>;
}

export default function App() {
  return <ChildWrap />;
}