How does updating the state in a reducer trigger a re-render of the component(s)?

Question

I understand that mapstatetoprops is mapping our Redux application state to our React component props, but i don't quite understand what's happening behind the scenes when a reducer returns a new state - how does that trigger a re-rendering of components that have props mapped to the application level state?

In pure React, setState triggers a re-render correct? Is something similar (or the same thing) happening via Redux?

Answer 1

Both Redux and React-Redux employ shallow equality checking.

In particular:

Redux's combineReducers utility shallowly checks for reference changes caused by the reducers that it calls.

React-Redux's connect method generates components that shallowly check reference changes to the root state, and the return values from the mapStateToProps function to see if the wrapped components actually need to re-render. Such shallow checking requires immutability to function correctly.

Answer 2

Well the whole point when you create a component using the redux "connect" function, is that behind the scenes you get connected to the redux state, and have a listener for the state changes.

So you create a simple component that gets his values from props, but those props are got from the state using the connect with "mapStateToProps".

Never dived in to the redux-react connect function, but if you want you can surely go ahead and see what it does exactly.

But the main point is what I explained above.