Everything About Redux for Beginners

Introduction to Redux With Real World Implementation

Welcome to another awesome topic. In this article, you will understand what are the things that you have to know about redux as a beginner.

Image source: https://www.pinterest.com/pin/384917099399187386/

Everyone thinks that this is a big and difficult topic to understand. But it is not. I will explain everything about what is the redux, what are the usage of it and parts of redux. Another thing is in the final section of this article we’ll implement a counter function with Redux.

Lets jump into the topic!

What is Redux ?

Redux is a JavaScript library that can be used to managing and maintaining the state of our applications. Most of the time Redux is playing with React. But you can use it with other frameworks as well. If you were familiar with React, All of you know that when we deal with the state in React, we have to pass states from one component to another using a prop. But in Redux makes it easier for us when dealing with states. In the next sub-topic, I’ll discuss how it is happening.

So if someone asks you what is Redux, you can easily say that “Redux is a state management tool”.

What is the issue without using Redux?

Let’s get an example. Look at the figure below.

Illustration by Author

This is a basic React Application. Here you can see that App is our main App component. Search, Movie List and Login are the child component of the App component. As well as Movie is a child component of the Movie List.

Let’s say you need to pass data from “Movie List” to “Movie”. So here you need to keep your state in the “Movie List” component and pass it to the “Movie” component through a prop. It is okay.

Illustration by Author

So what is the problem ? 😮

You cannot pass that defined state from Movie List to our “Search” component or to “Login” component. That's because “Search “ and “Login” are not Childs of “Movie List”. So we cannot pass data using props. This is one problem we face here.

As a solution for that, we can move up (Lifting up) our state. That means to bring our state into the App component. Then we can pass the data to any component because all the components are child components of the App component. But when the application is large, it is difficult to pass data using props. Another thing is keeping all the data inside of the App component is not make sense.

Those are the problem occurs when dealing with state in React without using Redux.

How Redux Solve those problems ? 😃

By using Redux, we do not need to keep our data inside of the components. Here It keeps the whole of our data in a separate place. That place is called “Store”. The Store is a big globalized data storing place. You can see it from the figure below.

Illustration by Author

Now the App is looking better than the previous right?

So now if we want some data to a specific component, we can easily get them from our Big Store. No longer need to use the props for passing data. All the problems which I described earlier without Redux were solve using this concept now.

Photo by bruce mars on Unsplash

Main Sections of Redux you need to know

Ok guys, in this section I’ll give you a basic idea about the main sections in Redux you should know. If they were confused, don’t worry I’ll show you a practical example about Redux in the final section as well.

1. Store

The store is a globalized state. That means it is holding all the data of our application. Each component in our application can easily access those data. This store is we keep it separately and isolate from components. You can see it in the figure I have described above.

2. Action

The word action sounds like doing something. But in Redux it is not like that. So in Redux, The action means it describes what you wanna do. For example, if I want to perform an increment function, in the action it says that “Hey I want to increment the counter”

3. Dispatch

Dispatch is the step that is executing our action. Its task is to send our action into the reducer. Then according to that action reducer updating our Store.

4. Reducer

Reducer is checked our action. So it is checks which action we want to perform and according to that, reducer changes the state from one state to another state. So the reducer modifies our Store.

Create Counter App with Redux

Let’s create a simple counter app in Redux with the use of the sections I have described above.

First of all, you need to set up a react project. Here I will mention what are the steps you have to do to set up a react app.

1. Install Node.js on your computer.
2. Create a folder anywhere in your computer
3. Open VS Code from that folder
4. Open the terminal in VS Code
5. Use “npx create-react-app my_react_app” commmand and hit enter

my_react_app is the name of your React Application. We can give any name for it. Now your React App was created.

Now let’s build our first Counter App with Redux.

Install Relevant packages

First of all, you have to install two packages to your react app.

1. Redux : State Management package
2. React-Redux : Gives us the ability to connect react and redux together.

To install these packages, You should run this command.

npm install react react-redux

I have already installed them. So after installing them, your package.json file shows it like this.

Screenshot by Author

Implement the Action

In previous sections, we were discussed that Action is described what we wanna do. Here we implement a counter app. So we want to perform increment and decrement actions. We implement it like this. It is super cool.

Just create a function to those tasks(increment, decrement) and return an object. Here we give the type of these two actions as “INCREMENT” and “DECREMENT”.

Create Reducer

This is also a function. We passed two parameters to this function.

1. Initial State : We implement a counter app. So the initial state is 0.
2. Action : Action we have implement previous

Then we should add a switch case with “action.type” and according to the type of action, reducer is updating the state.

If the case is “INCREMENT”, then increment the state of the counter by 1. 
If the case is “DECREMENT”, then decrement the state of the counter by 1.

After implementing, its looks like this.

Create Store

Now let’s create our store. First, you need to import the createStore() package to your code. The command is as follows.

import {createStore} from 'redux'

By using this command, you can import this package. After importing the package we can create our store now. Here also we passing our created Reducer (counter) to this store.

In the code, under the reducer section, we can create our store like this. Just write this simple code line.

let store = createStore(counter)

Dispatch the Action

Finally, we can execute dispatch. Here we pass the created actions into the dispatch.

To display it, I put a console.log here. It can be done like this.

That’s it, guys. We did it! 😃

So finally our console looks like this.

So as a beginner, some of you think that this is very difficult than using props. But when you practice it, this is the best and efficient way to deal with states in React applications.

Summary of Counter App

Here we only do 5 steps.

• Set up a react project and installing relevant packages.
• The second thing is to describe what are the actions we have to perform.
• The third one is to create a reducer. Here based on the type of our Action, we update the state.
• Next, create the store. Here we passed the reducer into the Store. Then according to the reducer, our main store(Big globalized state) will update.
• The final thing we have done is, implementing the dispatch. Here we execute our Actions by using dispatch.

Congratulations you now have a full idea about what is Redux and how it was works.

Thanks for reading and don’t forget to like and share.

See you in the next article. 😊