Steps to add Redux into your React project

hope you finally get to know why you are using redux in your project, read more.

Redux is a different entity from react, you can use redux anywhere in the project whether it is vue, angular, or vanilla js, etc. Redux is used to manage all the states and provide global data access to all the components in the project. you no need to follow that ancestor props passing to get access to parents or super-parents data.

Installation

before using redux in your app you need to install some packages.

# If you use npm:
npm install react-redux

# Or if you use Yarn:
yarn add react-redux

Create a global store

The provider will server your store to all your components, so any component will get access to every state into the store.

let's create a store! ,

create a file called store.js, and install redux-thunk(thunk is used for dispatched actions asynchronously), redux logger (logger is used to monitoring the state into console), and import all require function to create a store, i.e createStore, applyMiddleware.

congrats!! , you have successfully created the global store.

This is a cycle you need to follow while using Redux, I’ll explain this cycle through an example of a login System;

Create an action folder where we are going to set up action types and action creators and this will further get a handle by the reducer and update the state into the store, lets see the directory structure.

Into the reducer will have one main index.js file, where all reducer gets to combine and store into the global store.

Now we get to go:-

I assume you submit the login form, I’m starting with handleSubmit function, dispatch(login(username, password)) this will take you into the actions folder into auth.js where we implemented our login function.

action folder/ auth.js

above all these actions are handle by the Reducer,

reducer folder / auth.js

we define our initial state, then change into the state as per user intend to change, … state (this is spread operator which keep you state as it is and in that it will perform an action which provides through action creators.)

I hope you will get help out through this article, using the above snippets you will get some idea of how to manage redux into your react project.

Thank you!!

for feedback or for help you can connect with me.

Linkedin

email- shindemayur0601@gmail.com