Add middleware support to any function prop or withState from recompose
with-middleware
provides the ability to add middleware support (and reducers)
to function props of a component.
The middleware API follows closely to that of redux
, giving you the ability
to quickly re-use some of the middlewares that were written for redux within a
single component.
This library goes well with the usage of the withState
higher-order component
from recompose
. Changes will be required if you're using withReducer
from recompose
.
Install the library via:
npm install with-middleware --save
import React from 'react';
import { compose, withState } from 'recompose';
import { withMiddleware } from 'with-middleware';
import logger from 'some-logger-middleware';
const enhance = compose(
withState('counter', 'setCounter', 0),
withMiddleware('counter', 'setCounter', [logger])
);
const Counter = enhance(({ counter, setCounter }) => (
<div>
Count: {counter}
<button onClick={() => setCounter(n => n + 1)}>Increment</button>
<button onClick={() => setCounter(n => n - 1)}>Decrement</button>
</div>
));
export default Counter;
import { withMiddleware } from 'with-middleware';
withMiddleware(
stateName: string,
stateUpdaterName: string,
middlewares: Array<Middleware>
): HigherOrderComponent
import { useReducer } from 'with-middleware';
useReducer(
reducer: Function
): Middleware
import { useDevtools } from 'with-middleware';
useDevtools(
title: string // title shown in redux-devtool-extension console
): Middleware
with-middleware
is MIT licensed