Now with Partition Management

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

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

    23,314

    Version

    1.1.0

    License

    Apache-2.0

    Unpacked Size

    53.1 kB

    Total Files

    28

    Last publish

    Collaborators

    • avatar
    • avatar