Structuring React and Redux applications
There’s no idiomatic way to structure Redux applications yet. And I believe there’s no The Only True Project Structure but I’ll describe what works for me.
There are two approaches for grouping files:
- By type: one folder for components, one for reducers, one for actions, etc.
- By feature: all files related to one feature are inside the same folder.
I started from grouping by type. It works for a small application but to add a new feature you have to create:
components/MyFeature.js and a few more. It’s annoying and difficult to explain to new team members.
Now I group files by view or page:
Here are main folders I have in my application:
app: Redux store configuration and root reducer, React Router routes, application root components with connections to Redux, Redux DevTools, React Router and React Intl.
components: shared components.
models: Immutable.js records.
Feature folders look like this:
- I follow the Ducks convention so instead of separate files for actions, reducers and constants there are single
duckfile. I also put Reselect selectors into the duck file as
componentsfolder contains all React components that are unique to this view.
FeatureNameViewis connected to Redux and contains all action calls. Nested components receive handlers as props and don’t know anything about Redux. All page layout goes to
For simple applications I like the simplest structure:
File names are still contain component class names so you can open them using a fuzzy search in your editor. I also have an extra entry file in every component folder,
It allows you to import components like this:
components/Component1 instead of
Ducks and selectors
Each feature has its own duck file
duck.js structured as follows:
Then import it at the root reducer,
I use selectors as the only way to access Redux state in components. So I connect selectors and actions to feature’s root component,
Development and production versions
In a few places I have separate files for development and production builds:
store/configureStore, for example. I think they are easier to use then a single file with a bunch of
configureStore.production.js are completely independent modules and
configureStore.js chooses which one to use:
It allows you to do
import configureStore from './store/configureStore and have the right version of the module depending on the current environment.