I'm trying to organize my code in the best way possible, I would like to know how you do it to get ideas :)
For further actions, you may consider blocking this person and/or reporting abuse
I'm trying to organize my code in the best way possible, I would like to know how you do it to get ideas :)
For further actions, you may consider blocking this person and/or reporting abuse
Mohamed Mayallo -
Eduardo Henrique Gris -
Alex Booker -
Plain -
Top comments (4)
Here's how I currently tackle it, based on the Ducks pattern :
A few other notes:
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 namedindex.js
or something :)@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.
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).