Wondering what’s next for npm?Check out our public roadmap! »

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

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

7,536

Version

1.0.5

License

Apache-2.0

Unpacked Size

49.2 kB

Total Files

24

Last publish

Collaborators

  • avatar
  • avatar