store enhancer for redux which allows to listen for dispatched actions
MIT License
Store enhancer for redux which allows listening of dispatched actions.
npm install --save redux-dispatch-subscribe
The dispatchSubscribe
store enhancer add a addDispatchListener
to your Redux store. The dispatch listener of called after regular store listeners.
Since dispatchSubscribe
overloads the dispatch 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 { dispatchSubscribe } from 'redux-dispatch-subscribe';
const enhancer = compose(
applyMiddleware(...middleware),
dispatchSubscribe()
)
// Note: passing enhancer as the last argument to createStore requires redux@>=3.1.0
const store = createStore(reducer, initialState, enhancer);
Note: since compose
applies functions from right to left, dispatchSubscribe
should appear at the end of the chain.
const unsubscribe = store.addDispatchListener(action => {
// Do whatever you want here
if ( this && that ) {
Mixpanel.track(action.name);
}
if ( other ) {
Intercom.update({...});
}
if ( isLogout(action) ) {
if ( isCordova() ) {
logoutCordova();
}
else {
window.location = getLogoutUrl();
}
}
})
const unsubscribe = store.addDispatchListener(action => {
if (action.type === 'ping') {
store.dispatch({ type: 'pong' });
}
});
class MyLayoutComponent extends Component {
componentDidMount() {
this.unsubscribe = this.props.store.addDispatchListener(action => {
if (action.type === "SCOLL_TO_TOP") {
this.layoutRef.scrollTop = 0;
}
})
}
componentWillUnmount() {
this.unsubscribe();
}
render() {
return (
<div className="layout" ref={c => this.layoutRef = c}>
<div>content</div>
</div>
);
}
}
Because it's a very simple solution to listen for dispatches and react to them.
If you already use Redux-saga or Redux-observable it will not be useful for as this lib is aiming to solve the same usecase. If you don't and these libraries are frightening you, this solution could be simpler and lighter. If you only need one listener of this type in your app, you could create a middleware instead. This solution is mostly useful if you want to easily register/remove listeners during app lifetime.
Discussions with Yassine Elouafi and me (Redux-saga) lead to the creation of Redux-saga which is much more advanced (and complex) than this solution. This solution is how I implemented the saga/process-manager/whatever pattern in my own app before Redux-saga even existed. I created this store enhancer for myself mostly due to a complex app migration and retrocompatibility with existing legacy code.
Implementation is inspired from redux-batched-subscribe.
Looking for a React/ReactNative freelance expert with more than 5 years production experience? Contact me from my website or with Twitter.