useSimpleState hook

useSimpleState.ts

import React, {
  createContext,
  useContext,
  useReducer,
  Reducer,
  Context,
  Dispatch,
  ReactNode,
  Provider,
  ReactElement
} from 'react';

export type SimpleStateReducer<S extends object, A extends SimpleStateAction> = Reducer<S, A>;
export type UseSimpleStateReducer<S extends object, A extends SimpleStateAction> = [S, Dispatch<A>];
export type SimpleStateContext<S extends object, A extends SimpleStateAction> = Context<UseSimpleStateReducer<S, A>>;
interface StateProviderProps<S extends object, A extends SimpleStateAction> {
  reducer: SimpleStateReducer<S, A>;
  initialState: S;
  children: ReactNode;
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any
export interface SimpleStateAction<T = string, P = any> {
  type: T;
  payload: P;
}
type StateProvider<S extends object, A extends SimpleStateAction> = (
  stateProviderInput: StateProviderProps<S, A>
) => ReactElement<Provider<S>>;

interface SimpleState<S extends object, A extends SimpleStateAction> {
  useSimpleState: () => UseSimpleStateReducer<S, A>;
  StateProvider: StateProvider<S, A>;
}

export function simpleStateFactory<S extends object, A extends SimpleStateAction>(): SimpleState<S, A> {
  const StateContext: SimpleStateContext<S, A> = createContext(([] as unknown) as UseSimpleStateReducer<S, A>);
  const StateProvider: StateProvider<S, A> = ({ reducer, initialState, children }: StateProviderProps<S, A>) => (
    <StateContext.Provider value={useReducer(reducer, initialState)}>{children}</StateContext.Provider>
  );
  const useSimpleState = () => useContext(StateContext);

  return { useSimpleState, StateProvider };
}