DEV Community

MariLuz
MariLuz

Posted on

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

I'm trying to organize my code in the best way possible, I would like to know how you do it to get ideas :)

Top comments (4)

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 :)

Collapse
 
dance2die profile image
Sung M. Kim • Edited

@markerikson (Redux maintainer) recently posted a Redux Style guide.

It's contains best practices, patterns, which can guide you to organizing your Redux site.

FYI - Structure-wise, the guide recommends, Feature Folders or Ducks pattern.

Collapse
 
alicode95 profile image
Ali Maqsood

public
-- index.html
...

index.js

src
-- assets
--- css
---- common.css
...

--- images
---- image1.jpg
...

-- layouts
specifies common layouts, renders routes and matched views
--- layout1
---- layout1.js
---- layout1.routes.js

-- views
(usually rendered by a route and responsible for component layout)
--- view1
---- view1.js
---- view1.reducer.js
---- view1.action.js
...

-- components
(included in views)
--- component1.js
--- component2.js
...

-- services
(common code, authenticator, rbac component provider)
--- service1.js
--- service2.js
...

-- lookups
(application constants/ config logically grouped together)
--- lookup1.json
--- lookup2.json
...

This is a general structure I follow. It aggregates most of my code in a logical and easy-to-find way. Mostly came across this on need basis.

Also, I am using a redux middleware only for api calls which manipulate the application state (shared by more than one component). Otherwise, I use my custom made AsyncRequest and AuthenticatedAsyncRequest to reduce redux's boilerplate code.

I would suggest you to look into React Suspense (just came across it, pretty cool but i think it's experimental).