useEnhancedReducer() - middlewares for React Hooks flux stores

useEnhancedReducer() empowers building complex orchestration into flux stores built using React Hooks.

loggerMiddleware.ts

import { MiddlewareAPI, Dispatch } from '@data-client/use-enhanced-reducer';

export default function loggerMiddleware<R extends React.Reducer<any, any>>({
  getState,
  dispatch,
}: MiddlewareAPI<R>) {
  return (next: Dispatch<R>) => async (action: React.ReducerAction<R>) => {
    console.group(action.type);
    console.log('before', getState());
    await next(action);
    console.log('after', getState());
    console.groupEnd();
  };
}

DataProvider.tsx

import {
  useEnhancedReducer,
  Middleware,
} from '@data-client/use-enhanced-reducer';

interface ProviderProps {
  children: ReactNode;
  middlewares: Middleware[];
  initialState: State<unknown>;
}

export default function DataProvider({
  children,
  middlewares,
  initialState,
}: ProviderProps) {
  const [state, dispatch] = useEnhancedReducer(
    masterReducer,
    initialState,
    middlewares,
  );

  return (
    <DispatchContext.Provider value={dispatch}>
      <StateContext.Provider value={state}>{children}</StateContext.Provider>
    </DispatchContext.Provider>
  );
}

Middleware Examples

• Reactive Data Client's NetworkManager
• Reactive Data Client's PollingSubscription
• LogoutManager
• StreamManager a websocket stream for cryptocurrency prices.