Redux FAQ: Code Structure
Table of Contents
- What should my file structure look like? How should I group my action creators and reducers in my project? Where should my selectors go?
- How should I split my logic between reducers and action creators? Where should my “business logic” go?
Code Structure
What should my file structure look like? How should I group my action creators and reducers in my project? Where should my selectors go?
Since Redux is just a data store library, it has no direct opinion on how your project should be structured. However, there are a few common patterns that most Redux developers tend to use:
- Rails-style: separate folders for “actions”, “constants”, “reducers”, “containers”, and “components”
- Domain-style: separate folders per feature or domain, possibly with sub-folders per file type
- “Ducks”: similar to domain style, but explicitly tying together actions and reducers, often by defining them in the same file
It's generally suggested that selectors are defined alongside reducers and exported, and then reused elsewhere (such as in mapStateToProps functions, in async action creators, or sagas) to colocate all the code that knows about the actual shape of the state tree in the reducer files.
While it ultimately doesn't matter how you lay out your code on disk, it's important to remember that actions and reducers shouldn't be considered in isolation. It's entirely possible (and encouraged) for a reducer defined in one folder to respond to an action defined in another folder.
Further information
Documentation
Articles
- How to Scale React Applications (accompanying talk: Scaling React Applications)
- Redux Best Practices
- Rules For Structuring (Redux) Applications
- A Better File Structure for React/Redux Applications
- Organizing Large React Applications
- Four Strategies for Organizing Code
- Encapsulating the Redux State Tree
- Redux Reducer/Selector Asymmetry
- Modular Reducers and Selectors
- My journey towards a maintainable project structure for React/Redux
- React/Redux Links: Architecture - Project File Structure
Discussions
- #839: Emphasize defining selectors alongside reducers
- #943: Reducer querying
- React Boilerplate #27: Application Structure
- Stack Overflow: How to structure Redux components/containers
- Twitter: There is no ultimate file structure for Redux
How should I split my logic between reducers and action creators? Where should my “business logic” go?
There's no single clear answer to exactly what pieces of logic should go in a reducer or an action creator. Some developers prefer to have “fat” action creators, with “thin” reducers that simply take the data in an action and blindly merge it into the corresponding state. Others try to emphasize keeping actions as small as possible, and minimize the usage of getState() in an action creator. (For purposes of this question, other async approaches such as sagas and observables fall in the "action creator" category.)
This comment sums up the dichotomy nicely:
Now, the problem is what to put in the action creator and what in the reducer, the choice between fat and thin action objects. If you put all the logic in the action creator, you end up with fat action objects that basically declare the updates to the state. Reducers become pure, dumb, add-this, remove that, update these functions. They will be easy to compose. But not much of your business logic will be there. If you put more logic in the reducer, you end up with nice, thin action objects, most of your data logic in one place, but your reducers are harder to compose since you might need info from other branches. You end up with large reducers or reducers that take additional arguments from higher up in the state.
Find the balance between these two extremes, and you will master Redux.
Further information
Articles
Discussions
Please login to continue.