From Beginner to Pro: A Deep Dive into the Core Concepts and Principles of Redux

As a React developer, you probably get by with state management using the useState Hook, which is a very lovely approach but has its limitations especially when it comes to managing the state of a large application. It is for this reason that there are numerous ways of managing state in React apps namely; redux-toolkit, zustand, and Context API among others.

Whilst learning Redux, most developers, especially beginners struggle with the core concepts of Redux and end up being frustrated and confused along the way. This article hopes to help all developers, regardless of their level solidify their understanding of the core concepts of redux.

Pre-requisites

Knowledge of React Fundamentals - JSX, state, props etc

Basic Es6 js syntax

Understanding Redux

What is Redux?

According to the official documentation of Redux, Redux is defined as a predictable state container for Javascript apps.

What exactly does this mean?

Predictable: Redux provides a predictable way to manage the state of your application. This means that, no matter how complex your app is, the state changes will happen consistently and reliably. This predictability makes it easier to debug and reason about your application's behaviour.
State Container: Redux is a tool that helps manage the state of your JavaScript application.
Javascript apps: Redux is not tied to React, as it is designed to work with any Javascript library or framework.

Why Redux?

If you're familiar with useState, a react hook used to update the state of you're applications, you'd know that when it comes to passing down this state as props across your applications especially if it's a huge one, you're bound to get confused at some point and fall into prop drilling.

Redux solves this hassle by maintaining your global state, which is simply the state that is used across your application. And due to the predictability of Redux and the features it provides, you're able to know and understand exactly when, where and how your state is being updated.

When do I use Redux?

One question that might be hanging in your head now is, what then is the purpose of the useState hook, can't I use Redux in all my state management usages? The question is no. According to the official docs, redux is more useful when;

You have large amounts of application state that are needed in many places in the app.
The app state is updated frequently over time.
The logic to update that state may be complex.
The app has a medium or large-sized codebase and might be worked on by many people.

Redux Concepts

To better understand the three major concepts and principles of redux, here is an exciting story.

Mr K wakes up one morning suddenly having an intense craving for bread and decides to go to the bakery down his street to do something, BUY_A_BREAD.

When he gets to the bakery, he soon realizes that they are different types of bread with different flavours, shapes and sizes displayed in the store's INVENTORY for customers to buy.

Mr K having explored all of his choices finally makes a decision and goes to the STOREKEEPER and places his order. The STOREKEEPER then inputs the order into the computer, prints a receipt, and updates the inventory/store book to reflect the amount of bread they have left to sell.

Now, let us relate this story to React's core concepts and principles;

Store: The bakery had an inventory that kept all the different pieces of bread available for order. Therefore, the inventory in the bakery is what the store is to Redux - it is where all the state of your application is stored.
Action: When Mr K went to the bakery, he did so with the intention to BUY_A_BREAD. This is likened to an action in redux - a description of something that needs to happen in your app. So, to update the state of your app with Redux, you need to let it know with an action.
Reducer: After Mr K had made his choice on what type of bread to buy, he placed his order via the STOREKEEPER. Note here that he didn't just go to the INVENTORY to update i. What he did was make his action known to the STOREKEEPER who then went to pick up the bread from the shelf and updated the inventory. This is like the reducer in redux - a function that takes action and then updates the state.

So, in summary, the three core concepts of Redux can be explained in terms of a bakery: you have an inventory where all the state (bread) is stored, actions are like descriptions of what needs to happen (customer orders), and reducers are like functions that modify the data to create a new state (packaging bread and updating the inventory).

Redux Principles

Single source of truth: From the bakery analogy above, the inventory was the centre of the bakery. This is like the single source of truth in redux - it stores all the information about the orders that need to be processed.
State is read-only: When Mr K wanted to buy bread, he had to go to the storekeeper to ask for it. The storekeeper then goes to the shelf and gives them the bread. This is like how the data in the store is read-only in Redux. You can look at it and use it, but you can't change it directly. You have to ask for help (using actions and reducers) to change it.
Changes are made with pure reducers function: When Mr K placed an order, the storekeeper took one off the shelf and updated the inventory to reflect how many pieces of bread were left. A reducer is a function that takes the previous state- (how many pieces of bread the bakery had before the order was made) and the action and then returns a new state- how many pieces of bread are left.

Conclusion

In conclusion, this article has provided a beginner-friendly introduction to Redux, including its core concepts and principles. This article is intended to be the first in a series, so stay tuned for more in-depth articles on specific aspects of Redux!