This blog’s goal is to explain the core concept of Redux by making a ToDo list application. If you don’t know what ToDo really is, it is a list created by the user on Add Task button, you can add, delete, edit and update that list. So this blog post will show you the steps to create the app where the user can Add a list of posts, delete posts, edit posts and update posts. I believe that you have Node.js installed on your system.

First, let’s create a project through the terminal by using the command line

This command works with the CLI tool to generate a react boilerplate project for us so that we don’t have to configure any tool. If that fails or gives out any error, make sure that you have installed create-react-app on your system. If not, do that and then run the above command.

The above command will install create-react-app globally on your system so that you can use it anywhere you want.
It will take some time. Once that command finishes its job, you will have a new directory named ‘todo-app’.

Now do the following to get into the directory and start your server.

You can use any platform, ‘web storm’ or ‘visual studio’ to edit your files

If you are working with  ‘web storm’, you can use the terminal on the same by pressing

Now let’s install redux and its react binding. So open the terminal in the web storm and write the following

Redux is a state management library that gives you access to the state anywhere in your components without the need to pass props(properties). So that it can be used with any front-end libraries such as Angular and React but it works best with React. ‘react-redux’ is the official library that connects the two.

Now let’s delete the logo and the header in todo-app from the App.js and start the server.

After starting the server by using the above commands, make sure that everything is working properly.
If you are getting errors, please make sure you have made those changes in App.js.

Whenever I make any React application, I always try to make the basic version of it and then add interactivity to it. So with that in mind, let’s create some components.

In todo-app/App.js do the following-

Here I have created two components, TaskBar, and TaskList. The TaskBar will contain the form elements for creating a post and the TaskList will contain all the post list. So let’s create a file for each of these components. Under src folder create two files TaskBar.js and TaskList.js
Inside TaskBar.js add the following code-

Inside TaskList.js add the following code-

with that, we have the following output

Now we have our basic UI in place, let’s get into the redux. First thing is to understand about Redux is Redux Store, where the entire state of your application will live.

The main benefits of using Redux is that it allows us to store our state in a single store instead of managing the state in different components. A store is an object which has some methods in it that allow us to hold current state, setState, dispatch(action), subscribe(listener). This is great because now we don’t have to pass down the data from the parent component to deeply nested child components through props. So anytime a component needs data, it can ask the store and the store will provide the data.

With that in mind, let’s create the store in our todo-app/src/index.js and to do that make the following changes

The createStore method will allow us to create the store. This method needs a special argument which is called by name, reducer.

Let’s create a separate file, Reducers.js and add the following code in it

Reducers change in response to the action. It works as a Mixer/Grinder, which takes the initial state and action and gives the output as a final state
Things never do in a reducer
1)mutuate its argument
2)API calls and routing transition
3)call non-pure function like Math.random()
Now let’s understand another important concept in Redux called Actions. Actions are nothing but plain Javascript objects with the type, property. This type of property describes the event that is taking place in the application. This event can be anything from incrementing a counter to adding items in an array. These actions help us track the different events that are happening in our application. The structure of an action is as follows

We created a function addTask using the arrow function of ES6. We can use the simple function also which return  type:  ADD_TASK and payload: task, which works when the reducer dispatch the action by using the bindActionCreators

The only use case for “bindActionCreators” is when you want to pass some action creators down to a component that isn’t aware of Redux, and you don’t want to pass dispatch or the Redux store to it.

Now we can add our task on Add Task button and the list will be created below the tasks.

If you want to clone or download the full todo-app click here