Scaling your Redux App with ducks

It’s one of these things I too keep struggling with from time to time: do you organize your project files per type/functionality, or per feature?

Alex Moldovan from FortechRomania:

Our approach starts from the need to isolate the React code into a single folder — called views — and the redux code into a separate folder — called redux.

Inside the views folder, we prefer a function-first approach in structuring files. This feels very natural in the context of React: pages, layouts, components, enhancers etc.

Then, inside the redux folder…

Per feature a “duck folder” is created, containing actions, reducers, selectors, etc. for said feature:

duck/
├── actions.js
├── index.js
├── operations.js
├── reducers.js
├── selectors.js
├── tests.js
├── types.js
├── utils.js

Might give this kind of structure a try for the next React+Redux project …

Scaling your Redux App with ducks →