I am currently trying to conceptualize how to handle dispatching an action in a component based on a data change after a dispatch in another component.
Take this scenario:
dispatch(someAjax)
-> property in state updates.
After this, I need another component dependent on this same property to know that is has updated and dispatch an action based on the new value.
Rather than using some type of value.on(change...
solution, what is the preferred way to handle this type of action 'cascading'?
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);