How to structure Redux components/containers

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.

Leave a Comment

tech