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!
Top comments (0)