How to listen for specific property changes in Redux store after an action is dispatched
You may use Redux's mapStateToProps
and connect
with React's componentDidUpdate(prevProps, prevState, snapshot)
hook.
So basically your code could look like this:
const mapStateToProps = (state) => ({
specificProperty: state.specificProperty,
// any props you need else
});
class YourComponent extends React.Component {
render() {
// render your component
}
componentDidUpdate(prevProps, prevState, snapshot) {
if (prevProps.specificProperty !== this.props.specificProperty) {
// Do whatever you want
}
}
}
YourComponent = connect(mapStateToProps)(YourComponent);
There are two basic approaches: either a middleware that diffs the state after an action is done, or using Redux's low-level store.subscribe
API.
The Redux FAQ has an answer that covers this. Also, I keep a categorized list of Redux-related addons and utilities, and that includes a group of existing store change subscription libraries that implement various approaches to listening for data changes.