reactjs - Dealing with data consistency in a very large store in React + Redux SPA SaaS

Question

So, we are planning to use a PHP backend with a React+Redux frontend server. We are developing a very large application, lots of tables across the entire application. Since it will be a Single Page Application, all the data is contained within on store object.

So, let's see if I am with the right mindset. My state would start almost empty when I login into the app. As I visit pages, my state will start to fill up. Example: I visit the "photos" of the app, then I will end up load some of the photos from my DB and putting it inside my store:

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

And later on, if I need photo with id = 17, I don`t need to request it again, I can use it from my store, right? Or maybe I take it from store first and request it async to check if there were changes to it.

As I visit more and more pages, I'll have a huge store object with a lot of elements from different tables, eg. photos, videos, user_configurations, friends etc. How should I deal with data consistency? If I need an object I already fetched 10min ago, should I request it again? Is it "healthy" to have such a big store object?

I'm planning to use normalizr & reselect to manipulate my date inside react-redux.

Any thoughts on it? I would like to hear how do you think is a good way to deal with the situation.

Thanks in advance!

Fábio

Answer 1

Yes, a normalized Redux store is the standard recommendation. See Redux FAQ: Organizing Nested State , Structuring Reducers - Normalizing State Shape, and the Selectors and Normalization part of my React/Redux links list for more information.

As for caching data, conceptually this shouldn't really be different than any other client-side setup. Storing lots of data will take up a similar amount of memory, no matter whether you're using Redux, Angular, Ember, Backbone, or something else. It's up to you to decide how much you want to cache, and when and how you might want to clean out cached data.

Finally, for manipulating relational/normalized data in your Redux store, I recommend a library called Redux-ORM. You should absolutely use Reselect in general, and Normalizr is good for normalizing data you've received, but Redux-ORM provides a useful abstraction layer for querying and updating that normalized data once it's in the store. I've written a couple blog posts describing its use: Redux-ORM Basics and Redux-ORM Concepts and Techniques.