How to design Redux stores and actions? [closed]

Question

ReactJS and Redux offer a new paradigm as far as developing the front end of applications goes. Both have relatively simple APIs and after spending a little time are pretty easy to grasp from a technical point of view. But from a design perspective, I have been unable to find recommendations on best practices or pitfalls.

Where can I find recommendations or advice on how to design my global Redux store? Keeping the entire state of an application in a global store seems like it could get unwieldy rapidly. What should I be sure to avoid in doing so? What about the actions that modify the global state? Is it better to make fewer actions that can do different things based on the action data, or many more specific actions?

Answer 1

This is a great question, but it's a bit difficult to tangibly answer because so much of it is an "it depends" question. But, I would highly recommend taking an in-depth look at the redux.js.org docs. There's lots of little bits of wisdom in there about suggestions for shaping an API or reducing duplication or general unwieldiness.

Additionally, I'd add a few general tips:

• you usually don't need state quite as often as you'd think. So some things can be accomplished with more props and less store-driven state
• grouping things into larger "topics" can often help data organization at the store level; so you might provide higher-level properties on the store for a given user, auth, and any further "topics" would get grouped in the same way.
• sometimes, you might create slightly-more verbose state structures, but the tradeoff is predicability and greater overall simplicity. Still a win over MVC or 2-way craziness
• last, as a minor point, "global" state doesn't really have to be so global. In one sense, a single state tree means that all the state is "global" (or at least unified), but unless you expose the store to every single component, it's not really global. Nicely-decoupled components will make thinking about data flowing from up-top easier IMO and things don't really have to be "global", if that makes sense.

Hope that helps a bit!

See also:

• http://redux.js.org/
• https://medium.com/@dan_abramov/the-evolution-of-flux-frameworks-6c16ad26bb31#.1pkpbhihd
• https://github.com/markerikson/react-redux-links/blob/master/tips-and-best-practices.md