How to structure Redux components/containers

Question

I’m using redux and I’m not sure about how to organize my components, I think the best is to keep them in folders with the name of the main component as the name of the folder and all inner components inside:

components
  Common/   things like links, header titles, etc
  Form/     buttons, inputs, etc
  Player/   all small components forming the player
    index.js  this one is the top layout component
    playBtn.js
    artistName.js
    songName.js
  Episode/  another component

Then, in the containers folder, I’ve one container per page, that are the only ones I'm actually connecting to Redux:

containers/
  HomePageApp.js
  EpisodePageApp.js
  ...

and then the actions are one per each top component, instead of one per page, so in the page container that I connect to Redux I pass all the actions of the components used in that page. For example:

actions/
  Player.js
  Episode.js
  ...

Am I doing this right? I haven't found much information about it googling, and the ones I've found I think they are limited to small projects.

Thanks!

Answer 1

In the official examples we have several top-level directories:

• components for “dumb” React components unaware of Redux;
• containers for “smart” React components connected to Redux;
• actions for all action creators, where file name corresponds to part of the app;
• reducers for all reducers, where file name corresponds to state key;
• store for store initialization.

This works well for small and mid-level size apps.

When you want to go more modular and group related functionality together, Ducks or other ways of grouping functionality by domain is a nice alternative way of structuring your Redux modules.

Ultimately choose whatever structure works best for you. There is no way Redux authors can know what’s convenient for you better than you do.