My Awesome React/Redux Structure

Learn how to architect a React/Redux application in a classy way

Photo by Simon Zhu on Unsplash

I wanted to show how I structure React/Redux applications. I will be using JavaScript ES2015 Classes for many of my files. I think classes help with structuring your code.

If you don’t care for Classes, then check out the other source code examples:

• React/Redux (TypeScript — classes)
• React/Redux (JavaScript — classes)
• React Hooks/Redux (TypeScript — functional) (arrow functions)
• React Hooks/Redux (TypeScript — functional) (regular functions)
• React Hooks/Redux (JavaScript — functional) (regular functions)

Overview

This article will cover the following topics:

• Application workflow (best practice)
• Folder structure (awesomeness)
• Views (simplified)
• Stores (Redux)
• Actions (app communication)
• Effects (API requests)
• Reducers (data management)
• Selectors (view business logic)

See the sample application working, that corresponds to this article.

Application Workflow

I’ve worked on many applications throughout my career. From ActionScript to the most modern JavaScript frameworks and libraries. I’ve learned a lot along the way.

What follows are some patterns, strategies, and opinions I’ve developed along the way.

Here is the ideal Application lifecycle:

• View dispatches an Action.
• Action calls an Effect.
• Effect handles API calls and sanitizes incoming data or returns an error.
• Action receives sanitized models or an error from the Effect and dispatches it.
• Reducer receives the models or an error from the Action and adds them to the store.