Work with data consistency in a very large storage in React + Redux SPA SaaS

Question

So, we plan to use the PHP backend with the Front React + Redux server. We are developing a very large application, many tables throughout the application. Since this will be a one-page application, all data is contained within the store object.

So, let's see if I am configured correctly. My state will start almost empty when I enter the application. When I visit the pages, my state will begin to fill up. Example. I visit the “photos” of the application, and then upload some photos from my database and put them in my store:

state{ ... photos: [1: {...}, 3: {...}, 17:{...}] ... } 

And later, if I need a photo with id = 17, I no longer need to request it, I can use it from my store, right? Or maybe I first take it from the store and ask for an asynchronous check to see if there were changes in it.

As I visit more and more pages, I will have a huge storage object with a lot of items from different tables, for example. photos, videos, user_configurations, friends, etc. How should I work with data consistency? If I need an object that I already dialed 10 minutes ago, should I request it again? Is it great to have such a large store facility?

I plan on using normalizr and reselecting to manipulate my date inside response-redux.

Any thoughts on this? I would like to hear how you think this is a good way to handle the situation.

Thanks in advance!

Fabiu

Answer 1

Yes, Redux normalized storage is a standard recommendation. See the Redux FAQ: Nesting , Structuring Reducers - State Formalization and Selectors and Normalization in my React / Redux link list for more information.

As for data caching, conceptually this should not be very different from any other client installation. Storing a lot of data will take about the same amount of memory, regardless of whether you use Redux, Angular, Ember, Backbone or something else. It's up to you how much you want to cache, and when and how you can clear cached data.

Finally, for managing relational / normalized data in your Redux repository, I recommend a library called Redux-ORM . You should use Reselect as a whole, and Normalizr is good for normalizing the data you received, but Redux-ORM provides a useful level of abstraction for querying and updating normalized data after it is stored in the store. I wrote a couple of blog posts describing its use: Redux-ORM Fundamentals and Redux-ORM Concepts and Methods .