@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

Dependencies (1)

Dev Dependencies (0)

    Package Sidebar

    Install

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

    Weekly Downloads

    1,507

    Version

    1.2.9

    License

    Apache-2.0

    Unpacked Size

    15.4 kB

    Total Files

    6

    Last publish

    Collaborators

    • ntucker
    • ljharb