redux-batched-subscribe | store enhancer for https : | State Container library

Welcome to React and Redux - it's awesome when you get the hang of it.

I presume you are using the react-redux package to handle the binding between React and Redux. This package provides a class called Provider which you wrap your application in. Provider does several things, but one of the big ones is that it subscribes to the store and triggers a re-render when the store changes.

As @zzzzBov mentioned, derived values should not be added to the store. For that we use selectors. In your case, that would mean DataSet1 lives in the store, and both DataSet2 and DataSet3 would be calculated by a selector. Just to make this clear, here is the flow of events when a user changes DataSet1:

1. User changes DataSet1, a function you have defined in mapDispatchToProps() dispatches an action on the store.
2. The reducers run, generating a new state object.
3. Any subscribers to the store are called and passed the new state object (in this case, Provider).
4. Provider triggers an efficient re-render of the components (by efficient I mean it checks to see if the piece of state they select in mapStateToProps() has changed).
5. Your components responsible for rendering DataSet2 and DataSet3 select DataSet1 from the store, and derive DataSet2 and DataSet3 on the fly, then pass them on to their respective components.

If you don't want the DataSet2 and DataSet3 components to re-render on every change to the store, use the library reselect. Reselect caches derived values, which in turn avoids spurious re-renders. When the state changes, Reselect checks to see if its input values have changed, if they have, it recomputes the output. Your components then select from Reselect instead of selecting directly from the state object.

Hopefully that helps. Good luck!