How to Organize Your React/Redux Code for Easy Navigation and Development

I learned a very specific folder structure when I first learned ReactJS and Redux: organize files by type. The files in a redux application generally fall into the following categories.

Components
Containers
Reducers
Actions
Constants

The official Redux repo examples show that files are classified by category

All the examples follow the same folder structure

This made perfect sense for a small application with only a few components. However, as the application grows in size, it becomes much more difficult to manage. Consider the todomvc example from the redux repository:

Who has a monitor tall enough to see all of these files?

Assume you’re working on a new component that will be linked with redux. This means you’ll need to interact with each and every folder. As more files are added, especially spec files, having everything expanded in the file tree becomes unmanageable.

There are keyboard shortcuts for quickly navigating the files, but sometimes I just click on the folders in the sidebar.

So I reasoned that a better organization could be achieved through what I call modules. A module, in my opinion, is

A self-contained component that handles all of its internal logic while requiring few external dependencies.

In practice, this means that instead of having a folder called components, I would have a folder called TodoSection.

Let’s go back to the todomvc example. Here’s how I would have organized the files (note that it’s not exactly 1 to 1). I mostly want to demonstrate the general concept; I’m pretty sure the app will no longer run)

New and improved

The application is now divided into four major sections.

App
Footer
Header
TodoSection

Assume you need to create a new section called “sidebar” that is linked to redux. All you’d have to do is make a new folder and add the necessary files, and you’d only be able to work from that single folder.

The folder structure I prefer is as follows (with TodoList as the module name):

- TodoList
  - index.js
  - TodoList.js
  - actions.js
  - constants.js
  - reducer.js
  - subcomponents
    - index.js
    - TodoItem.js

index.js — this is the container file where redux state and dispatch functions are mapped using connect . I also like to use react-loadable to lazy load modules. This is the file that is imported for rendering, since node default to the index.jsfile if you import from the folder.

import TodoList from '<path>/TodoList';

TodoList.js — this is the component itself.
actions.js — here contain all the action creators/thunk actions.
constants.js — any constant that is needed for the module. Commonly contains constants used in the reducers.
reducer.js — the reducer responsible for the TodoList state. Assuming the redux state looks like

{
  todoList: [{ id: 1, todo: 'buy milk' }, {...}]
}

subcomponents — any extracted components that are used repeatedly in the main component. I like to organize this folder using an index.js file as well. Here’s how I use this

// TodoList/subcomponents/TodoItem.js
class TodoItem extends React.Component {
  render() {
    <div className="todo-item">
      {this.props.todo}
    </div>
  }
}
export { TodoItem };

// TodoList/subcomponents/index.js
export * from './TodoItem';

// TodoList/TodoList.js
import { TodoItem } from './subcomponents';