Convert any useReducer() dispatch to be able to allow its actions to be passed to Redux-like middleware

MiddlewareDispatch.ts

import React from 'react';

export type ReducerAction = Record<string, any> & {
  type: string;
};

type Middleware = (a: ReducerAction) => void | Promise<void>;

type Middlewares = Middleware[];

const initialState: Middlewares = [];

const MiddlewareState = React.createContext<undefined | Middlewares>(undefined);

export const MiddlewareSetState = React.createContext<
  undefined | React.Dispatch<React.SetStateAction<Middlewares>>
>(undefined);

export function MiddlewareContainer({children}: {children: React.ReactNode}) {
  const [middlewares, setMiddlewares] = React.useState(initialState);
  return (
    <MiddlewareState.Provider value={middlewares}>
      <MiddlewareSetState.Provider value={setMiddlewares}>
        {children}
      </MiddlewareSetState.Provider>
    </MiddlewareState.Provider>
  );
}

const transform = (scope: string) => (action: ReducerAction) => ({
  ...action,
  type: `${scope}/${action.type}`,
});

export function useMiddlewareDispatch<A extends ReducerAction>(
  scope: string,
  dispatch: React.Dispatch<A>,
): React.Dispatch<A> {
  const middlewares = React.useContext(MiddlewareState);
  if (middlewares === undefined) {
    throw new Error(
      `useMiddlewareDispatch must be used within a <MiddlewareContainer />`,
    );
  }
  const transformAction = React.useMemo(() => transform(scope), [scope]);
  return React.useCallback(
    (action: A) => {
      const transformedAction = transformAction(action);
      middlewares.forEach((middleware) => {
        middleware(transformedAction);
      });
      dispatch(action);
    },
    [transformAction, middlewares, dispatch],
  );
}

export function useAddMiddleware(middleware: Middleware) {
  const setMiddlewares = React.useContext(MiddlewareSetState);
  if (setMiddlewares === undefined) {
    throw new Error(
      `useAddMiddleware must be used within a <MiddlewareContainer />`,
    );
  }
  setMiddlewares((m) => [...m, middleware]);
}