The Beginner’s Guide to React Redux

Gone are the days where state can be an afterthought for your web project. Websites are handling more data live than they ever have before – but that doesn’t need to be a scary thing.

Redux is an open-source JavaScript library for managing the state of a web application. It is essential to know the state of each component in modern applications as they consist of different UI components that interact with each other. It is typically done at the component level in a framework like React.

Redux enables you to manage the state of an entire application using a single immutable object. It allows users to easily manage the global state and access the state of any connected component. The best part is that Redux can be integrated into any application from applications running plain Javascript to ones using frameworks like React, Angular, and Vue. In this tutorial, we’ll be using React Redux – but there are very similar implementations for whatever type of application that you are creating.

Core Components of Redux

Redux introduces a couple of new components to an application to facilitate this state management.

• Actions - Actions are used to send data from the application to the Redux store. A typical action consists of the type property and an optional payload property.
• Reducers - This is a function that accepts the current state and action as arguments and returns the updated state according to the action.
• Store - This is the heart of Redux where the state is stored. The state is kept in plain JavaScript objects and arrays.

Creating a Simple Redux Application

In this section, we’ll create a simple to-do application using React and Redux.

Step 1 - Create the sample React App

Install the create-react-app package, create an app named “redux-to-do” and install Redux.

npm install -g create-react-app

create-react-app redux-contact-app

npm install --save redux react-redux

Step 2 - Create the folders for Redux

Create the following actions, reducers, and store folders in the src folder to facilitate Redux functions, and then fill them with the following javascript files:

Step 3 - Create the Actions

First, in our actionTypes.js. We’ll export the actionType for every action object we create:

export const CREATE_NEW_TODO = 'CREATE_NEW_TODO';

export const REMOVE_TODO = 'REMOVE_TODO';

Step 4 - Create a toDoActions.js file.

This will hold all the actions of the application, which in our case are the create and delete actions.

https://gist.github.com/LiorB-D/6206000cc36b14003f8c237de8b08b20

Step 5 - Create the Reducers

Create the toDoReducer.js file to connect the actions with the state stored in the Redux store:

https://gist.github.com/LiorB-D/fc1572ed0fc35045c63a5e4f4a0e04e7

Additionally, create an index.js file in the reducers folder to combine the reducers.

https://gist.github.com/LiorB-D/4085aab1e3d9e9ff4ae834b4963d2890

Step 6 - Create the Store

Create a file named configureStore.js to initialize the store and connect to the reducers.

https://gist.github.com/LiorB-D/1256f6114a347cc33fe4ac15589bf6cf

Step 7 - Update the index.js file in the application root

We will import the react-reduce provider and store and wrap the component with the Redux store.

https://gist.github.com/LiorB-D/26dc730777f92fb051dbbfce70e2cd09

Step 8 - Update the App.js File

In this step, we will render the application with the specified components and connect with Redux to obtain the state of each component.

https://gist.github.com/LiorB-D/6828d6d7ffa693b853d4b426f6b511e0

Note - The CSS classes are derived from the Bootstrap CSS framework. So you will have to link the Bootstrap stylesheet with the application. It can be done by adding the URL of the Bootstrap CSS file to the head section of the index.html file in your public folder.

Step 8 - Run the application

Use the npm run command to build and run the application. It will start the application on your default browser. Add some tasks and try it out.

That's it and you have successfully created a to-do application that manages the state via Redux!

If your local machine is slowing your development down, try Codesphere. Codesphere is an intuitive web IDE and cloud provider that lets you code, debug, and deploy all with the power of the cloud!

Happy Coding!