React + Redux for a complex SaaS

Question

I'm just starting with a React + Redux frontend for a complex SaaS we`re developing.

One thing I`m not sure of is how store (from redux) should work for a big application. The system we're developing has many tables, and a very complex data structure. If I would have all reducers putting data from every part of the application, it would be too much.

Can i enable/disable some reducers for certain parts of the application? Or should I have different stores that are composed of different reducers? Most of the examples I saw online were quite simple, so it was fine to have all data in the store at all times.

Another question: What would be a neat way of making the requests that I need for the page I`m trying to load? For example: suppose I have components A, B and C that require information about the tables "users", "movies" and "settings" respectively. In one page I have components A & B, and in the other one I have components B & C, is there any tool that help me get only data I need based on the "requirement" of certain components? Or is it done manually?

Again, I`m just starting to learn react+redux, sorry for the newbie questions.

Thanks!

Answer 1

The idiomatic usage of redux is to have one store, although some may consider separate stores if the application can be split up into separate, unconnected parts.

The common practice is to compose reducers (as I think you have suggested); you can make this hierarchical, so a reducer may be composed of several others. Redux is pretty performant if split up this way.

I would think carefully about your state; keeping it normalized as possible is very important, and if you have large amounts of data, preferring objects over arrays will also help when accessing individual items.

If you can keep the state highly normalized, you can use selectors to derive view data when rendering; if you do this a libarray like reselect memoizes the functions for you improving performance again.

This is a good read:

http://www.thinkloop.com/article/extreme-decoupling-react-redux-selectors/