Getting Started With Redux

Introduction

 

In the previous article, we have discussed the concept of Redux and the basic usage and principles of Redux. Now, in this article, we will learn about installation of Redux and how it is used. Before getting started with Redux in React applications, we must be aware of how Redux works as a stand-alone.

 

Redux installation

 

To start with Redux, we must follow these three steps.

1. Your system must have node.js and npm installed. If not installed, then you can install it from here.
   
   
   
   To install npm, you can type this command in your Visual Studio Code terminal,
   
   npm install
   
   
2. Create a folder in your workspace, named ReactDemo.
   
   
   
   
3. Now in the third step, go to your terminal to the project folder.
   
   
   
   Run the command.
   
   npm init –yes
   
   
   
   This command will initiate the package.json and add it to your blank folder with default settings.
   
   
   
   
   
   
4. Now, in the next step, run the following command.
   
   npm install redux
   
   
   
   It will install the required package.
   
   
   
   After this command, we can see that the Redux package is updated in package.json file.
   
   
   
   
5. Now, in the last step, we will create a JavaScript file named index.js.
   
   It will have the code,
   
   console.log("Index js in redux app")
   
   
   
   After running the command, node index, it will display output in the console.
   
   
   
   

Main concepts in Redux

 

There are three main concepts in Redux. Let’s think of an example that a user wants to log in for which you need a login component.

 

So, in Redux, it has three building blocks. Let’s think of a shop where we are going to purchase any item.

 

The entities we have for performing the whole activity will be,

• Shop – Stores the products in the shop
• Shopkeeper – In the store that will sell all the items
• Customer – At the entrance of the store, who will purchase the item

So, how does Redux work here?

 

Here, the customer will go to the shopkeeper to buy any product, he will ask for it to be provided,  instead of taking it by himself.

 

So, based on my example,

• The shop is the store which holds various products,
• Purchasing Product is the Action where the customer will ask for the product which he wants
• The shopkeeper is the reducer which takes the action to be performed by the customer and completes the action from the store and provides the product to the customer. In this way Reducer ties the Store and action together.

So, Redux involves all three concepts together.

• Store – It holds the state of the application
• Action – An action describes the change in the state of the application
• Reducer – This carries out the state transition depending on the action.

Now let’s see how core concepts work with the three principles of Redux as we learned in the last article,

 

As we know First Principle states a single source of truth, which means it maintains an application state in a single object which would be managed by Redux store.

{
   NumberOfProducts : 5
}

The second principle states that the state is read-only, Redux doesn’t allow the state to update directly. To update the state of the application, you need to inform Redux about that with that action.

 

The action will be – PurchaseProduct

{
   type : PurchaseProduct
}

The third principle states that changes are made with pure functions. So, in this, we will create pure reducers or pure function

 

Reducer – (previousState, action) => newState

 

It will take the Action and update the state value and return a new state.

 

So, let’s see how this works.

Image source - https://smallbusinessforum.co/elm-architecture-with-react-redux-redux-loop-645a67070b1a

 

We know that the state cannot be updated directly so we will need a reducer to update state. Store subscribes to any event, and action dispatches that event to the reducer.

 

So, let’s go in detail about each concept,

 

Action

 

Action is the only way to interact with the store. It carries information from your application to the redux store.

 

Action contains plain JavaScript objects. It contains type properties that identify the type of action need to be performed which is defined as a string constant.

 

Let’s look at the demo of creating action by creating a Login Component.

 

First, we will define the type of action you want to perform,

 

const LOGIN = 'LOGIN'

 

After that, we will define the action,

{
        type: LOGIN,
        payload: {
            username: "priyanka",
            password: "priyanka",
        }
    }

The function in which action is defined is named as action creator, all actions are created in it,

function loggedIn() {
    return {
        type: LOGIN,
        payload: {
            username: "priyanka",
            password: "priyanka",
        }
    }
}

So, logged in here is the action creator.

 

In the next article, we will learn about the next step of dispatching an action to the store using Reducer

 

Summary

 

In this article, we have learned about how to get started with Redux and the basics of three core concepts of Redux and the detailed explanation about Action and how it is created in VS Code. Now in the next article, we will go into detail of the concept of Reducer and Store along with creating this in a Redux application.