How to listen for specific property changes in Redux store after an action is dispatched

ReactjsReduxRedux Thunk

Reactjs Problem Overview


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'?

Reactjs Solutions


Solution 1 - Reactjs

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);

Solution 2 - Reactjs

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJazzyView Question on Stackoverflow
Solution 1 - ReactjsPinkiNiceView Answer on Stackoverflow
Solution 2 - ReactjsmarkeriksonView Answer on Stackoverflow