useEnhancedReducer() - middlewares for React Hooks flux stores

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

loggerMiddleware.ts

1import { MiddlewareAPI, Dispatch } from '@rest-hooks/use-enhanced-reducer';
2
3export default function loggerMiddleware<R extends React.Reducer<any, any>>({
4  getState,
5  dispatch,
6}: MiddlewareAPI<R>) {
7  return (next: Dispatch<R>) => async (action: React.ReducerAction<R>) => {
8    console.group(action.type);
9    console.log('before', getState());
10    await next(action);
11    console.log('after', getState());
12    console.groupEnd();
13  };
14}

CacheProvider.tsx

1import {
2  useEnhancedReducer,
3  Middleware,
4} from '@rest-hooks/use-enhanced-reducer';
5
6interface ProviderProps {
7  children: ReactNode;
8  middlewares: Middleware[];
9  initialState: State<unknown>;
10}
11
12export default function CacheProvider({
13  children,
14  middlewares,
15  initialState,
16}: ProviderProps) {
17  const [state, dispatch] = useEnhancedReducer(
18    masterReducer,
19    initialState,
20    middlewares,
21  );
22
23  return (
24    <DispatchContext.Provider value={dispatch}>
25      <StateContext.Provider value={state}>{children}</StateContext.Provider>
26    </DispatchContext.Provider>
27  );
28}

Middleware Examples

• Rest Hook's NetworkManager
• Rest Hook's PollingSubscription