Components and Concerns

Jeremy Keith, on Separation of Concerns and how that comes into play where one’s dealing with Component based design:

My point is this:

  • Separating structure, presentation, and behaviour is a good idea.
  • Separating an interface into components is a good idea.

Those two good ideas are not in conflict. They work best when they’re done in combination.

Yes, yes, yes, … YES! A THOUSAND TIMES YES!

Components and Concerns →

💁‍♂️ You might also have seen this related image float around on the Twitters:

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:

├── 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 →