2 Best Ways To Structure Your Redux App in 2020

Показать описание

In this video I talk about the two industry standard ways to structure your redux code & redux application.

0:00 A quick recap of how Redux works and the different components you can have.

2:05 Method #1: Standard sub folders
In this method we separate all of our reducers, actions, and action names into separate files for each reducer. When we want to add a new action to our reducer, we are updating all 3 files.
Pros:
- Good organization for apps with small amounts of reducers that may be a bit more complex
- Everything is separated in it's own place, so things are easier to find
Cons:
- When dealing with bigger projects, your file size grows 3x per reducer, and it can be really confusing and hard to work with
- Constantly having to switch files around to make simple actions... the context switching can get confusing. Especially when using Redux Thunk or Redux Saga
- Action and dispatch names can get confusing and mixed up

In this method we combine our constants, reducers, and actions all into one file called a Duck. Each new reducer is a new duck.
Pros:
- Faster to code since everything is in one place
- Great for projects where you have a lot of non-complex reducers
- Action names are unique to each project/reducer/action, so you'll never dispatch an action from the wrong reducer
- Very simple to work with when you add 3rd party libraries
Cons:
- For really complex reducers, your files might be too long, and you'll have to split the reducer up
- You might find yourself scrolling up and down the file while debugging

Follow me on Social Media: