Multi tool use

Clash Royale CLAN TAG

react - instantly storing DataSet1 and DataSet2 to Redux Store where DataSet2 is derived from DataSet1

(sorry if similar question is asked, but I found ones on multiple action dispatches and re using the redux-batched-subscribe. That is not what I want)

I need to produce a dashboard similar to one shown below.

It uses three sources - DataSet1 (amounts added by users), DataSet2 and DataSet3.

DataSet2 and DataSet3 are derived from DataSet1 (i.e. certain calculations are done on DataSet1) using utils/function.

Any time DataSet1 changes (user adds a new amount, edit or deletes it) DataSet2 and DataSet3 should be recalculated and dashboard should instantly update entirely.

I am trying to design it to avoid repetitive recalculations and circular re-renderings.

I am thinking of doing it using Redux-Thunk.

What is the React way of doing similar tasks ?

Thank you !

EDIT:
Removed unneeded detail, added Reselect to tags

1 Answer
1

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.

react-redux

Provider

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:

mapDispatchToProps()

mapStateToProps()

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.

reselect

Hopefully that helps. Good luck!

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.