CODEWITHSUNDEEP
reactjsreact-redux
user9623401
user9623401

Reputation:

how components get updated when data store changes

I'm new to React and still struggling in understanding in using redux with React.

For example, below is some code :

   const mapStateToProps = (storeData) => ({
      editing: storeData.isEditMode;
   })

   const mapDispatchToProps = {
      saveCallback: xxx
   }

   const connectFunction = connect(mapStateToProps, mapDispatchToProps);

   export const ProductDisplay = connectFunction(
       class extends Component {
          render() {
             if (this.props.editing) {
                 ...
             } else {
                ...
             }
          }
      }
   )

and a component that uses ProductDisplay

export default class App extends Component {
   render() {
       return <ProductDisplay/>
   }
}

Let's say storeData.isEditMode is changed by other component, so the wrapped component's props.editing is changed. As we know that the only way to trigger update process is to use setState() but how does react know that ProductDisplay component needs to be updated since there is no setState() method involved?

Upvotes: 0

Views: 45

Answers (1)

developerKumar
developerKumar

Reputation: 1796

The connect function generates a wrapper component that subscribes to the store. When an action is dispatched, the wrapper component's callback is notified. It then runs your mapState function, and shallow-compares the result object from this time vs the result object from last time (so if you were to rewrite a redux store field with its same value, it would not trigger a re-render). If the results are different, then it passes the results to your "real" component" as props.

Dan Abramov wrote a great simplified version of connect at (connect.js) that illustrates the basic idea, although it doesn't show any of the optimization work.

update

React-Redux v6.0.0 made some major internal changes to how connected components receive their data from the store.

For more details: https://spin.atomicobject.com/2018/04/02/redux-rerendering/

Upvotes: 1

Related Questions