React + Redux Architecture: Separation of Concerns

Abhinav Jain
9 min readAug 2, 2017

Is having a basic understanding of React and Redux good enough to build an application? No, it’s definitely not. This is not how we do it!

One of the most important aspects required in the architecture of a React-Redux app is SEPARATION OF CONCERNS.

Why do you need this?

When I started working on a React Redux application, I looked for blogs or articles on this topic. I wanted to find the right approach towards the architecture of an application.

But I couldn’t find any articles which could connect everything. So I have come up with everything based on my experience.

Do not start your app by designing the component and the reducer structure. You need to take a lot of things into account before doing any of that. There is one thing which everyone must follow:

Never compromise on quality.

Let’s start with the basics.


React has become the preferred choice for writing client-side JavaScript applications. Its code re-usability, writing code in JSX, and the virtual DOM has made React popular and easy to work with.

But why Redux?



Abhinav Jain

Sports | Adventure | Crypto | Senior Software Developer @knolskape | @reactjs | @reduxjs | Never compromise on quality