DEV Community

loading...

React, Redux app folder structure

amrmohammed123 profile image amrmohammed123 ・1 min read

Hello Guys, I have been searching for a good folder structure for React, Redux apps that is easy to traverse and suitable for large projects. and after some research this what I came up with.

src/
_components/
_
_component/
_
_____index.js
_
_____component.js
_
_____component.css
_
_____component.test.js
_
_____sub-component/
_
_________index.js
_
_________sub-component.js
_
_________sub-component.css
_
_________sub-component.test.js
_
routes/
_____route/
_
_____index.js
_
_____route.js
_
________route.css

_reducers/
_
_rootReducer.js
_
_reducer1.js
_
____reducer2.js

_actions/
_
_actions.js
_
____actionCreators.js
App.js
App.css
index.js
index.css

What do you think? and what structure do you use for your react, redux apps?

Discussion (3)

pic
Editor guide
Collapse
w9jds profile image
Jeremy Shore • Edited

Honestly, I highly recommend the duck system. I originally did everything (selectors, reducer, actions, constants) into a single file.

However, as my application got more complex and my store and sagas started use actions from elsewhere, I kind of adopted a more split up approach. The events file is populated with your action constants (I use enums) and sagas is your root sagas combining all of your store sagas. I highly recommend using redux-actions and reselect as not only do they cleanup a lot of code and boilerplate they can help with performance.

store
|__ events.ts
|__ sagas.ts
|__ current
| |__ actions.ts
| |__ reducer.ts
| |__ sagas.ts
| |__ selectors.ts
|__ notifications
  |__ actions.ts
  |__ reducer.ts
  |__ selectors.ts
Enter fullscreen mode Exit fullscreen mode
Collapse
coderabdo profile image
coder-abdo

src/
components/
pages/
redux/
reducers/
store/
actions
constants/
styles/