Store.js:

import {useReducer} from "react";
import {ACTION_TYPES} from "./storeActionTypes";

export const INITIAL_STATE = {
  counter: 0,
};

export const storeReducer = (state, action) => {
  switch (action.type) {
    case ACTION_TYPES.INCREASE_COUNTER_BY_1:
      return {
        ...state,
        counter: state.counter + 1,
      };
    default:
      return state;
  }
};

const Store = () => {
  const [state, dispatch] = useReducer(storeReducer, INITIAL_STATE);
  return [state, dispatch];
};

export default Store;

AnyComponent.js

import React from "react";
import Store from "../store/Store";

const AnyComponent = () => {
  const [store, dispatch] = Store();

  const handleInceaseByOne = (e) => {
    e.preventDefault();
    dispatch({type: "INCREASE_COUNTER_BY_1"});
  };

  return (
    <div>
      <button onClick={(e) => handleInceaseByOne(e)}>Submit</button>
      <span>counter from AnyComponent.js:{store.counter}</span>
    </div>
  );
};

export default AnyComponent;

OtherComponent.js

import React from "react";
import Store from "../store/Store";

const OtherComponent.js = () => {
  const [store, dispatch] = Store();

  return (
    <div>
      <span>counter from OtherComponent.js:{store.counter}</span>
    </div>
  );
};

export default OtherComponent.js;

所以基本上就像Redux一样，创建一个存储所有内容的存储库。在AnyComponent.js中，我们有一个按钮，它将counter加1，这样我们就可以看到AnyComponent.js和OtherComponent.js中store.counter的值。
请任何人告诉我，如果有什么错误的代码？
稍后将尝试将此上传到GitHub。
我在网上找了找，没有找到任何类似的东西，所以请让我知道你的想法。