Create data context

createDataContext.tsx

import React, { useReducer, Reducer, createContext, ReactNode, Dispatch } from "react";

type Action = <A>(dispatch: Dispatch<A>) => Function;

export default function <S, A extends Action>(
  reducer: Reducer<S, A>,
  actions: Record<string, A>,
  initialState: S
) {
  const Context = createContext<S>({} as S);

  const Provider = ({ children }: { children: ReactNode }) => {
    const [state, dispatch] = useReducer(reducer, initialState);

    const boundActions: Record<string, Function> = {};

    for (let key in actions) {
      boundActions[key] = actions[key](dispatch);
    }

    return (
      <Context.Provider value={{ state, ...boundActions } as unknown as S}>
        {children}
      </Context.Provider>
    );
  };

  return { Context, Provider };
};