Component State vs Redux Store

Working with React and Redux, I use a simple pattern to make my components reusable and to reason about.Over the past 1 and half year working with React, I have realised that anyone who is starting to work with React and Redux always faces a confusion of deciding which component should be interacting with the redux store and which components should just depend on there on own state.

So, in this article I will make an attempt towards making this distinction between when to choose component state and when to choose Redux store easier.

To start with, let’s focus on React first.

React has two types of components:-

1. Smart Components
2. Dumb Components — Also called as Presentational Components

The way I distinguish between the two of them is:-

If a component needs to hold state then it classifies as a Smart Component.

If a component just needs to display data and can receive that data from it’s parent component than those are classified as presentational components or dumb components.

For Example:- Let’s say we have an e-commerce application where in we have product listing page which displays a list of products.

In this scenario, a skeleton or a bare layout would have the following higher level components:-

<ShoppingApp>
 <Header />
 <SideMenu />
 <ProductsContainer>
 </ProductsContainer>
</ShoppingApp>