React, Redux app folder structure

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?

Comments

[Jeremy Shore]

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

[coder-abdo]

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