@rest-hooks/use-enhanced-reducer
TypeScript icon, indicating that this package has built-in type declarations

1.2.9 • Public • Published

useEnhancedReducer() - middlewares for React Hooks flux stores

CircleCI Coverage Status npm downloads bundle size npm version PRs Welcome

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

loggerMiddleware.ts

import { MiddlewareAPI, Dispatch } from '@rest-hooks/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();
  };
}

CacheProvider.tsx

import {
  useEnhancedReducer,
  Middleware,
} from '@rest-hooks/use-enhanced-reducer';

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

export default function CacheProvider({
  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

Package Sidebar

Install

npm i @rest-hooks/use-enhanced-reducer

Weekly Downloads

1,522

Version

1.2.9

License

Apache-2.0

Unpacked Size

15.4 kB

Total Files

6

Last publish

Collaborators

  • ntucker
  • ljharb