redux-batched-subscribe
Store enhancer for redux which allows batching of subscribe notifications that occur as a result of dispatches.
npm install --save redux-batched-subscribe
Usage
The batchedSubscribe
store enhancer accepts a function which is called after every dispatch with a notify
callback as a single argument. Calling the notify
callback will trigger all the subscription handlers, this gives you the ability to use various techniques to delay subscription notifications such as: debouncing, React batched updates or requestAnimationFrame.
Since batchedSubscribe
overloads the dispatch and subscribe handlers on the original redux store it is important that it gets applied before any other store enhancers or middleware that depend on these functions; The compose utility in redux can be used to handle this:
import { createStore, applyMiddleware, compose } from 'redux';
import { batchedSubscribe } from 'redux-batched-subscribe';
const enhancer = compose(
applyMiddleware(...middleware),
batchedSubscribe((notify) => {
notify();
})
)
const store = createStore(reducer, initialState, enhancer);
Note: since compose
applies functions from right to left, batchedSubscribe
should appear at the end of the chain.
The store enhancer also exposes a subscribeImmediate
method which allows for unbatched subscribe notifications.
Examples
Debounced subscribe handlers:
import { createStore } from 'redux';
import { batchedSubscribe } from 'redux-batched-subscribe';
import debounce from 'lodash.debounce';
const debounceNotify = debounce(notify => notify());
const store = createStore(reducer, intialState, batchedSubscribe(debounceNotify));
React batched updates
import { createStore } from 'redux';
import { batchedSubscribe } from 'redux-batched-subscribe';
import { addons } from 'react/addons';
const batchedUpdates = addons.batchedUpdates;
import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';
const store = createStore(reducer, intialState, batchedSubscribe(batchedUpdates));
Thanks
Thanks to Andrew Clark for the clean library structure.