Redux – Basic Understanding of the Concepts for Beginners. The Complete React JS Developer Course 2022 [Videos].

Is the reason is the number of boilerplates or the terminologies in Redux that turned you off from learning it? 

You are searching for a Redux guide, you watch some blogs/tutorials, you watch some YouTube videos but things become more confusing and complicated when you find that different videos are telling some different approaches to build an application. 

Store, Reducer, Action, Dispatch, Subscribe, and a lot of terminologies in Redux force you to think that why do we need to go with such a long process if things can be solved straightforward. You might be thinking that instead of simplifying the things its just increasing the complexity of an application. You might have also come across some libraries such as Redux, React-Redux, Redux-thunk, Redux-saga, Redux-promise, Reselect, Recompose, and many more. Routing, authentication, server-side rendering, bundling….oh gosh!!! A lot of things are there to learn and its overwhelming for you. At some point, you start losing your mind…

Relax! Youre not alone who is experiencing this problem and struggling with learning Redux.

If you are searching for a single resource to understand all the basics, keeping everything else aside which is not important to learn then we are here to help you and in this blog, we will try our best to make you understand all the basic concepts of Redux without making you confused with a bunch of terminologies. Lets start with that…

Firstly keep aside all the extra bit stuff and lets just go with the Redux only. Right now we will only introduce the minimum things in Redux to learn now. There is no need to go in deep initially with some concepts like React-router, Redux-form, Reselect, Ajax, Webpack, Authentication, Testing, etc. Remember that you dont run in one day, you firstly need to learn to walk. 

Before you start learning Redux, make sure you know the basics of React.

What is Redux?

In the official documentation, Redux is defined as…

Redux is a predictable state container for JavaScript apps.

Well, at first these 9 words give you the feeling of 90 incomplete sentences where you don’t get anything. Well, the documentation has explanatory stuff when you start watching it. Take an example of the React application. Most of the time you define the state in your application at the top-level of the component but have you noticed that when your application grows, all your state in a top-level component is no longer sufficient for you and now it’s difficult to manage all your state in the application? You may also have a lot of data changing in your application over time. Redux is introduced to solve all these problems. 

State management is a big concern in large applications and Redux solves this problem. Some nice things you can do with Redux are logging, hot reloading, time travel, universal apps, record, and replay, etc.

Three Core Principle of Redux 

We will keep it simple for you and let’s understand it first without using the technical jargon. Let’s consider a real-life scenario of banks. You want to withdraw some cash from your bank account. You go to the bank branch with one intention/action in your mind i.e. WITHDRAW_MONEY. When you enter the bank you go straight to the counter of Cashier to make your request. But….why do you need to talk to the cashier? Why you just don’t enter into the bank vault to get your money?

You’re aware that there is a process that you need to follow to withdraw your money. When you talk to the cashier, he takes some time, checks some details, enters some commands, and handover the cash to you. Let’s relate this example to Redux and understand some of its terminologies. 

1. Consider the Redux Store as a bank vault and the State of your application is like money. The entire user interface of your application is a function of your state. Just like your money is safe in the bank vault, the state of your application is safe in the Redux Store. Now, this leads to the first principle of Redux…

Single source of truth: The state of your whole application is stored in an object tree within a single store.

Let’s simplify this statement more. Instead of littering your money everywhere in the bank, keep money in one vault. So in Redux, it is advisable to store the application state in a single object managed by the Redux store. 

2. You visit the bank with action in your mind i.e WITHDRAW_MONEY. No one is going to give you money if you just roam around here and there. A similar thing happens in Redux. If you want to update the state of your Redux (like you do with setState in React) you need to let Redux know about your action. Just like you follow a process to withdraw money from your bank, Redux also follows a process to change/update the state of your application. This leads to the second principle of Redux.

State is watch-only

The only way to change the state is to emit an action an object describing what happened.

The meaning of the above statement is quite simple. In Redux your action WITHDRAW_MONEY will be represented by an object and it looks something like below…

{  
 type: "WITHDRAW_MONEY",
 amount: "$10,000"
}

The above object is an action in the Redux application that has a type field describing the action you want to perform. So whenever you need to change/update the state of your Redux application, you need to dispatch an action.

3. Consider your cashier in the bank as a Reducer in your Redux application. To WITHDRAW_MONEY from your bank vault, you need to convey your intention/action to the cashier first. Now the cashier will follow some process and it will communicate to the bank vault that holds all the bank’s money. A similar thing happens in Redux. To update the state of your application you need to convey your action to the reducer. Now the reducer will take your action, it will perform its job and it will ensure that you get your money.  Your Reducer always returns your new state. Sending off the action to the reducer is called dispatching an action. This leads to the last or the third principle of Redux.

To specify how the state tree is transformed by actions, you write pure reducers.

We will understand the pure Reducer later in this blog. Hope we have explained well about three main terminologies of Redux: The Store, The Reducer, and an Action.

Let’s build The First Simple Redux Application

With a real-life example, we understood the principles and some common terminologies of Redux but how to introduce all these things in an application? To deepen your fundamental concepts in Redux let’s take an example of a simple React application, and we will refactor the app to introduce Redux in it. 

If you’re familiar with React then you won’t have a problem in understanding the structure of the above React application. You can create this application using the create-react-app command. In your application, the main App component is importing a  component and renders the information in its body. The  component takes in a tech prop, and this prop displays different technologies to the user. For example  will display the below result to the user….

Below is the code for App component…

src/App.js

We are passing the tech as a prop into the HelloTech component as shown below:

For now, forget about the HelloTech component implementation. It’s just taking the tech prop and using some CSS for styling purposes. The main concern here is to refactor the App component and use Redux in it. Redux is the state manager for our application, so we need to take away the state object, and we want it to be managed by Redux. Remember the example of the bank vault, it keeps all the money. In a similar way, the Redux store manages the overall application state and it keeps the application state object. So we need to firstly remove the current state object from App.js and we need to install Redux by running npm install –save redux from the command-line interface. 

Create Redux Store

In the case of the bank vault, some engineers might be hired to create a secure money keeping facility. Similarly, here in Redux, Some APIs are provided by the Redux library to create the Store facility. Below is the code to create a Store in Redux…

import { createStore } from "redux"; //an import from the redux library
const store = createStore(); 

We have imported the createStore factory function from Redux, and then we have invoked the createStore() function to create the store. 

Define Store and Reducer Relationship

When you visit the bank to withdraw your money and let your action known to the cashier you do not get the money instantly. Firstly the cashier checks your account that if you have enough money to perform the transaction or not. It communicates with the bank vault for this information. In a nutshell, the Cashier and Vault are always in sync. A similar thing happens in Redux. The Store (Bank Vault) and the Reducer (Cashier) communicate with each other, and they are always in sync. But how to write this logic in our code??? We pass the reducer as an argument in createStore() function and below is the complete code for App.js

App.js

The Reducer

If you hear the word Reducer it sounds like it is a reducing function that performs ‘Reduce’ kind of job. Well, In JavaScript, you alwatchy use Reducer and that is an Array.reduce() method (you might be aware of this method). This method takes two values accumulator and currentValue. Take a look at the example given below…

let arr = [1, 2, 3, 4, 5]
let sum = arr.reduce((x,y) => x + y)
console.log(sum) // 15

Here x is the accumulator and y is the currentValue. A similar thing happens in Redux. Reducer is a function in Redux that takes two parameters. One is STATE of the app and the other is ACTION.  

Now we need to include the Reducer in our app which we haven’t done yet. So create a directory reducer and create a file index.js in it. The path for the reducer function will be src/reducers/index.js. Right now we will just pass Store as an argument in Reducer, and we will just export a simple function. The code looks like below…

export default (state) => {
}

In Array.reduce() we returned the sum of the accumulator and current value. If you take the example of our bank scenario then after withdrawal, the money in your bank vault is no longer the same. It will be updated and again, the Cashier and Vault will remain in sync with the balance left in your account. Just like the cashier the reducer always returns the new state of your application. We will talk about changing/updating the state later in this blog. Right now consider a case that you visit the bank and you didn’t perform any action so the bank balance remains the same. In Redux if you won’t perform any action and you don’t pass the Action as an argument in Reducer than the state will remain the same and the reducer will return the same state as a new state. At this point keep a new state being returned as the same state passed in.

export default (state) => {
    return state  
}

Second Argument for createStore 

When you created an account in your bank, you might have deposited some amount in your account, and if you ask the cashier your bank balance they’ll look it up and tell it to you. In the same way, when you create a Redux Store you do a similar kind of initial deposit which is known as initialState. We will represent this initialState as a second argument passed into the createStore.

const store = createStore(reducer, initialState);

So the initialState is like an initial deposit in your Store (bank vault) and if you don’t perform any action this initialState will be returned as the state of the application. Below is the updated code in App.js with initialState in our application. 

App.js

At this point, your application will throw an error if you run it because the tech prop still watchs, this.state.tech. We have removed the state object from our application so it will be undefined. Right now the state is entirely managed by Store so we need to replace this line with the getState() method which is available when you create a store with createStore() method. If we call the getState method on the created store, we will get the current state of our application. The INITIAL STATE passed into the createStore() is represented by the object {tech: React}. So in our case store.getState() will return this object. Below is the updated code for App.js

App.js

Congratulations!!! We just have refactored a simple React application to use Redux. Now the state is managed by the Redux. Now let’s move to the next topic which is Actions in Redux.

Redux Action

In our bank case scenario, your intention/action was WITHDRAW_MONEY. You have to let your action known to the cashier and the cashier will be responsible for updating your money in your account and handover it to you. The same thing happens in the Redux reducer. In a pure React application, we use the setState method to update the state in our application but here we need to let our action known to the Reducer to update the state in your application. But how?? 

By dispatching and action! And how to do that???

We just need to describe the action by a plain JavaScript object and this object must have a type field to describe the intent of the action. The code will look like something below…

{
 type: "withdraw_money"
}

You won’t get the money if you only tell your action to withdraw money to the cashier. You also need to mention the amount. Many times in our application we also need to add some additional information for full details. So we will add one more information amount in our code and it looks something like below…

{
 type: "withdraw_money",
 amount: "$3000"
}

We can include some more information but for now, it’s sufficient and ignore the other details. It’s really up to you that how you structure your action but a standard/common approach in Redux is using the payload field. We put all the required data/information in the payload object that describes the action  and it looks something like below…

{
 type: "withdraw_money",
 payload: {
    amount: "$3000"
 }
}

Handling Responses to Actions in the Reducer

We have discussed that Reducer takes two arguments in order to update the application. One is the state and the other is action. So a simple Reducer looks something like below…

function reducer(state, action) {

 // return new state
}

Now to handle the action passed into the Reducer we typically use switch statements in Redux which is nothing but basically, an if/else statement.

In the above example, we have taken two actions. One is withdraw_money and the other one is deposit_money. In your Redux application based on the requirement, you can define as many actions as you want but every action flows through the reducer and that’s what we have done in the above code. In the above code, both actions pass through the same reducer and the reducer differentiates each of them by switching over the action.type. This is how each action can be handled separately in Reducer without any inconvenience. Further in the above code, we just need to define the do something part to return a new state. 

Examining the Actions in the Application

Let’s go back to the previous example of HelloTech and understand how to update the state of the application. Look at the image given below. There are three buttons and our aim is to change the text/technology whenever a specific button is clicked. To do, so we need to dispatch an action, and the state of the application needs to be updated. 

For example, if button React-redux is clicked it should look something like below…

From the above image, it is clear that we need to describe three actions…

For the React button:

{
   type: "SET_TECHNOLOGY",
   text: "React"
}

For the React-Redux button:

{
    type: "SET_TECHNOLOGY",
    text: "React-redux"
}

For the Elm button:

{
 type: "SET_TECHNOLOGY",
 text: "Elm"
}

All three buttons do the same thing. That is the reason we have defined all the three actions with the same type of field. Treat them like customers in a bank with the same intent/action of depositing money (type) but the different amounts (text). 

Action Creators

If you look at the code we have written for creating actions you’ll notice that few things are repeated in the code. For example, the same type of field is written multiple times which is not good as per the DRY principle in programming. To keep our code DRY we need to look at the new term Action Creators. What are those….??? Let’s discuss that. 

Actions creators are just simple functions that help you to create actions keeping your code DRY and it returns action objects. Below is the code…

export function setTechnology (text) {
 return {
    type: "SET_TECHNOLOGY",
    tech: text
  }
}

In the above function, we just need to call the function setTechnology and we will get the action back. There is no need to duplicate the code everywhere. We can simplify this more, and we can write the same above code using the ES6 feature. 

const setTechnology = text => ({ type: "SET_TECHNOLOGY", text });

Let’s Bring Everything Together

In this section, we will talk about the folder structure, and we will see how to put everything in specific folders/files to keep the things organized. If we talk about our bank case scenario then you will notice that things are organized at their own place. For example, the cashier sits in their own cubicle/office and vault is safe in separate secure rooms. We will do a similar thing in Redux. It’s totally up to you how you want to structure your project but a common approach in Redux is to create a separate folder/directory for the major components such as reducer, actions, and store. 

Create three different folders reducers, stores, and actions. In each of the folders create an index.js file that will be the entry point for each of the Redux components. Now refactor the application we have built before and put everything at its own place. 

store/index.js

import { createStore } from "redux";
import reducer from "../reducers";

const initialState = { tech: "React " };
export const store = createStore(reducer, initialState);

Whenever we need Store anywhere in our app we can import the above file mentioning the path import store from “./store”;

Now the file App.js will have a slight difference in its code.

In the above code line, 4 has been changed according to the path of Store. We have also imported a component ButtonGroup which is basically responsible for rendering the three buttons.  component takes an array of technologies and spits out buttons. 

Another thing you need to notice that the App component returns an array. In React 16 you don’t need to use 

 React 

 {
   type: "SET_TECHNOLOGY",
   tech: "React"
 }

 {
   type: "SET_TECHNOLOGY",
   tech: "React-redux"
 }

function dispatchBtnAction(e) {
 const tech = e.target.dataset.tech;
 store.dispatch(setTechnology(tech));
}

{
    type: "SET_TECHNOLOGY",
    text: "React-Redux"
}

export default (state, action) => {
 switch (action.type) {
   case "SET_TECHNOLOGY":
     state.tech = action.text;  
     return state;

   default:
     return state;
 }
};

ReactDOM.render(, document.getElementById("root")

const render = () => ReactDOM.render(, document.getElementById("root"));
render();

store.subscribe(render);