How big is too big for a redux store?

Question

So, I am considering putting our entire translation object into the redux store before hydrating onto the client. This translation object is approx 50kb gzipped, and 115kb uncompressed.

Our entire site is translated, so this translation object basically represents all non-dynamic copy across the website. If it's hydrated onto the client on the initial http request, it should provide for an instantaneous browsing experience, at least for in-house copy.

However, I'm wondering if this is way, way too big for a redux store?

Answer 1

You should load the translations separately. Webpack allows for code splitting which can help. Or you can just use a script tag.

The reason for loading it separately is so the browser can cache it. This allows it to be loaded only once per user. Since the HTML page generated by React is dynamic and the store you pass down is also dynamic, they cannot be cached.

With such a large lump of data, loading it on each page load is just a bad idea.

Also, the store is for state. It's to handle stuff that changes. Putting static data in there is not what it is meant to handle. This doesn't mean it can't be done, but it's just not a good match.

Answer 2

I don't think there's a 'too big' size for a Redux store. However it should contain only application state. The translation objects should be in the code and you should access them through a i18n library. The state should as much have a field which says what language you must show to the user.