DEV Community

Discussion on: How do you prefer to organize the code of a react+Redux App?

View post
Collapse
 
gsto profile image
Glenn Stovall •

Here's how I currently tackle it, based on the Ducks pattern :

/components
  /shared
  /area_of_concern
/ducks
  /area_of_concern
    /actions.js
   /index.js
   /reducers.js
   /operations.js
  /utils.js
/shared
  /various_utility_files.js

A few other notes:

  • The areas for concerns between redux and components don't have to map 1-to-1. Your data structure does not always map to your UI in that manner.
  • operations are functions that either have side effects or dispatch multiple actions. Thunks live here if you are using those.
  • Utils are complex functions and hooks broken out of components. This makes them more composable and easier to test.
  • Keep test files in the same folder as the code they are testing. Kent C Dodds has a great article on colocation as a guiding principle for organizing files.
  • Favor components with longer names over a complex folder structure. I would not go deeper than the above example without a very good reason.
Collapse
 
markerikson profile image
Mark Erikson •

Strictly speaking, "ducks" specifically refers to having action creators and reducers in the same file, so I'd describe this as more of a "feature folder" approach.

Also, yes, I'm totally on board with longer descriptive file names. Maybe not Facebook long (where they have to be globally unique across the entire company codebase), but I'm find with /features/someFeature/SomeFeatureList.jsx. Sure beats having 20 tabs open all named index.js or something :)