Mutating large data structures in react/redux state

Question

I'm building an application boilerplate that will be used for large scale deployment of connected products. I need a large list to be held in memory to generate a tree structure that will display on a component. The data comes to me flat and I need to create the hierarchy in JS in the browser.

When I put this potentially mammoth data structure in redux state, it is immutable and will need to be instantiated/copied/changed many times over the course of the session, and I would like to avoid that.

Is there a best practice for where to put huge data structures that will change frequently in a react/redux application?

Answer 1

Standard suggested structure for nested/relational a Redux store is to keep everything in normalized form in the store, and denormalize as needed at the component level. You can use memoized "selector" functions to cut down on the amount of work being done for denormalization.

Some relevant links:

• Redux docs on derived data:
• The Redux FAQ on nested data:
• The Redux "tree view" example:
• Articles on React and Redux performance: