Nonflavored Prescription Medicine

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

    1.1.1 • 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

    Install

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

    DownloadsWeekly Downloads

    8,833

    Version

    1.1.1

    License

    Apache-2.0

    Unpacked Size

    54.4 kB

    Total Files

    28

    Last publish

    Collaborators

    • ntucker
    • ljharb