context-module-pattern.js

import { createContext, useContext, useReducer } from 'react';

const MyContext = createContext();
myContext.displayName = 'MyContext';

const MyContextProvider = ({ initialState = {}, ...props }) => {
  const [state, dispatch] = useReducer(
    (state, action) => {
      switch (action?.type) {
        case 'MYTYPE' : {
          return {...state, name : action?.payload }
        }

        default : {
          throw new Error(`Unhandled action type: ${action.type}`) 
        }
      }
    },
    { initialState }
  );
  
  const value = [state, dispatch];
  
  return <MyContext.Provider value={value} {...props} />
}

const useMyContext = () => {
  const context = useContext(MyContext);
  
  if (context === undefined) {
    throw new Error(`useMyContext must be used within a MyContextProvider`)
  }
  
  return context;
}

const myAction = dispatch => dispatch({ type : "MYTYPE" });
const myAnotherAction = (dispatch, payload) => dispatch({ type : "MYANOTHERTYPE", data: payload });