Codesphere
Published in

Codesphere

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.

Step 5 — Create the Reducers

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

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

Step 6 — Create the Store

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

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.

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.

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!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store