Redux: The Concept

You probably heard of Redux while learning React. It has been a buzz word really with the huge growth in popularity of React.js There are so many tutorials out there that explain redux with react and there is nothing wrong with that.

The point I am trying to put forward is that Redux is not a mere javascript library that you can use with React. It is more of a state management concept that you can use anywhere to manage states in your applications.

TLDR;

In short, redux is based on the following principles:

• Maintain a global data structure which is the single source of truth for your entire application. We call this the store.
• The store is immutable.
• Any event that can update store needs to fire an action with/without data.
• Actions are sent to the store through pure functions known as reducers that take inputs from actions and send new state to the store.
• Store will notify all the components of your application if anything has changed.

Let's start from the start

Okay, so I will try to keep this as simple as possible without using any react state management keywords for you to grasp the power of redux as a concept.
Why do we need to understand state management? State management is a crucial part of building any application whether it is frontend or backend.
You might say with REST APIs we do not need to manage state in our server anymore. Well you would be partially correct since that statement is only true for user data. You might have to keep certain states of variables in memory since database calls are expensive.

Redux concepts

Moving along, let us understand what we need to know to grasp this concept.

1. Store

The store is a data structure that is maintained globally. In other words, it is stored in a location that is accessible to all parts of your application.
It is the single source of truth for your application, which is just a complicated way of saying that if you face any conflict in state, the store's state prevails.
The store is immutable. You need to ensure that neither of your functions directly accesses or writes over the state maintained in the store.
The store will provide accessor functions to read the state from.

2. Action

Action is a function that is triggered whenever you want to change a state. So, lets say component A wants to increase global counter to 5. It will call the suitable action and pass along 5. Action is responsible for triggering a state change request from user.
Actions can even handle any side effects you want to include like something from a database,

3. Reducer

A reducer is a pure function which means a reducer is not affected by anything happening in the application. It reads the store and copies the state. It gets details of what to do from the action and might also receive some data parameters from the action that user has called. It will process these data and perform certain operations on it's copy of the state and return the new state.

These 3 parts make the fundamentals of redux. Really! I promise. All other nitty-gritties you might have heard are all implementation details that keeps on changing as various libraries evolve.
So, how does these components all work together? Here is a schematic diagram to explain just that.

Want to see how these simple concepts in redux come together to form great applications?
Here is a simple web app to show it in action
Windbnb
Code

If you liked this approach of looking at things, please follow me and share this with other developers as well.