React Redux

In this blog, we are learning about react redux. first of all, we need to know that what is react redux? 

It is a JavaScript open-source library to manage whole react application state.

How to install It in our local system :-

Go to your terminal and type this command “npm install react-redux redux” and hit enter.

When installation is finished, now we will add it in our project. Let’s see how to add it 

We have to create two folders action and reducer. Action is a file to create the dispatch functions, get the data to dispatch function and return the type of function and the passing data 

Let’s see how to create our action function: - 

In this piece of code, we have a dispatch function, we have to pass a param and in this function we have to return the object, type and payload. “Type” is a name of action it’s used in reducer file and “Payload” is a passing data which is also used in reducer file and is exported.

Now we have to create a reducer file. Let’s see how to create reducer :-

In this piece of code, we have a function, its name is testInput, in this function we have to pass two param first is state and second is action. In this function we have to implement a switch statement, we have to give an action. Type param means action’s type. If action’s type is match of the switch case, then it returns action payload data and we have to export the function.

Now, we have to create rootReducer, Let’s see how to create it :-

In this piece of code, we have to import reducer and combineReducers, then we create a rootReducer variable and assign a combineReducers function in it,combineReducers is a function to combine all reducers in one rootReducer after that we give all the reducer in the combineReducers function but this case we have only one reducer so we have given only one, but this is very useful thing when you have lots of reducers.

At the end of this code, we have to export the rootReducer

After that we have to create store, Let’s see how to create it :-

In this piece of code, we have to import createStore from “redux” and rootReducer, then we have to create store for createStore function and give it the rootReducer. If you want to see the all state management which is to help the debugging for the redux store so you have to give some window object
“window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()”

After that we have to export the store. Now, we have to go to main file in your react project which is index.js file and import Provider from “react-redux” and import store from store file, after that we have to provide the store in the whole react app let’s see how to do this.

In this piece of code, we have to use state store in the entire app with the help of provider.

Let’s see how to create the state use redux.

Now here we have to import useDispatch from react-redux, then create a variable and assign it to the useDispatch function in the variable. In this case my variable name is dispatch, after that we have to import action function, in this case we have to import testInput function from action file after importing the action function we have to call in the change of input that’s why we call onChange event like this. dispatch(testInput(e.target.value)) 

We successfully completed to dispatch our data in react redux store.

Now, we how to use our state data.

We have to import useSelector function in react-redux, after that create a variable and call the useSelector function like this “const data = useSelector((state)=> state.testInput)”. Now we can use our data.

 This is an implementation of how to setup the react redux store. The advantage to redux is we can use our state anywhere in our entire react app and it’s solves the props drilling problem which means if we keep sending props from parent to child component repeatedly that makes the workflow congested or not possible at certain scenarios.