GlobalState

GlobalState.js

class GlobalState {
  state = {};
  listeners = [];

  constructor(reducer, initialState = {}) {
    this.reducer = reducer;
    this.state = initialState;
    this.devTools = typeof window !== 'undefined' && window?.__REDUX_DEVTOOLS_EXTENSION__?.connect();
  }

  listen(listener) {
    this.listeners.push(listener);
  }

  unlisten(listener) {
    this.listeners = this.listeners.filter(l => l !== listener);
  }

  dispatch = (actionName, payload) => {
    const nextState = this.reducer(this.state, actionName, payload);

    if (nextState !== this.state) {
      this.state = nextState;
      this.listeners.forEach(l => l(nextState));
      this.devTools && this.devTools.send(actionName, payload);
    }
  };
}

Part of https://medium.com/@dominictobias/using-react-hooks-for-global-redux-stores-97c092afe210 article