How To Structure Your TypeScript + React + Redux App

The guide to a simple, more declarative React + Redux App

The Problem

When creating a React + Redux app, developers (including me) often feel that they need to do a lot of code splitting and abstraction to try to minimize redundancy in their code. Usually, they optimize too early and add complexities that make the app hard to manage. Structuring a React + Redux app can be very challenging in general, and when you bring TypeScript into the mix, you could easily waste a lot of time and energy over-optimizing.

A Solution

I would like to present to you my simple structure and overall architecture that works well with any size app. I have been using this in a production app of mine since the beginning and now up to 20K+ lines of code. There are a few optimizations that one may choose to make for an even larger app, but I just wanted to present my simple Elm based approach.

Folder Structure

Here’s the core folder structure of the app.