@data-client/use-enhanced-reducer
v0.1.10
Published
Add powerful orchestration to hooks-based Flux stores
Downloads
3,228
Maintainers
Readme
useEnhancedReducer() - middlewares for React Hooks flux stores
useEnhancedReducer()
empowers building complex orchestration into flux stores built using React Hooks.
loggerMiddleware.ts
import { MiddlewareAPI, Dispatch } from '@data-client/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();
};
}
DataProvider.tsx
import {
useEnhancedReducer,
Middleware,
} from '@data-client/use-enhanced-reducer';
interface ProviderProps {
children: ReactNode;
middlewares: Middleware[];
initialState: State<unknown>;
}
export default function DataProvider({
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
- Reactive Data Client's NetworkManager
- Reactive Data Client's PollingSubscription
- LogoutManager
- StreamManager a websocket stream for cryptocurrency prices.