Redux: The Concept
Tags: redux, webdev, beginners
Published: 2023-06-18 15:54:25

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.


![Components of Redux together](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0g9di75rpudk8wrbs4kp.jpg)

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](https://windbnb-319.netlify.app/)
[Code](https://github.com/asi309/windbnb)

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