[TEMPLATE] React Context/Reducer/Hook State Management (Redux Alternative)

template-context.tsx

import { createContext, useReducer, useContext, FC, useEffect, useMemo } from "react";

type InnerState = {};

export interface TemplateContextProviderState {}

export interface Action {
  type: ActionType;
  payload: {};
}

export enum ActionType {
  NO_ACTION,
}

const reducer = (state: InnerState, action: Action) => {
  console.log("TemplateContextProvider :: DISPATCH - action", ActionType[action.type]);

  switch (action.type) {
    case ActionType.NO_ACTION:
    default: {
      return {
        ...state,
      };
    }
  }
};

const initialState: InnerState = {};

const TemplateContext = createContext(initialState as TemplateContextProviderState);

export const useTemplateContext = () => {
  const context = useContext<TemplateContextProviderState>(TemplateContext);
  if (!context) {
    throw new Error("useTemplateContext must be used within a TemplateContextProvider");
  }

  return context;
};

export const TemplateContextProvider: FC = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initialState);

  const value: TemplateContextProviderState = useMemo(
    () => ({
      ...state,
    }),
    [state]
  );

  return <TemplateContext.Provider value={value}>{children}</TemplateContext.Provider>;
};