How to add Redux in the old Reactjs project.

This article about Redux is going to be part of a series that will help you with data management for your web applications.

Install these 3 NPM modules for connecting react with redux.

$ npm install redux redux-thunk react-redux --save

redux:- Redux is a predictable state container for JavaScript apps. Redux makes it easy to manage the state of your application. Another way of looking at this — it helps you manage the data you display and how you respond to user actions.

We import the createStore function and the applyMiddleware function. What is middleware? Well, it is nothing but a piece of code that sits between your actions and your reducers. It takes your actions does something to it before passing it down to the reducer. Think of it like a middle-man.

Now createStore is used for creating the redux store while the applyMiddleware will be used for adding the thunk middleware. Next, we have an import statement from the reducers directory ignore that for now. Basically it is importing the reducer we will need for this application. Here the name of the reducer is asyncReducer. Next redux-thunk.

By default actions in Redux are dispatched synchronously, which is a problem for any non-trivial app that needs to communicate with an external API or perform side effects. Thankfully though, Redux allows for middleware that sits between an action being dispatched and the action reaching the reducers. There are two very popular middleware libraries that allow for side effects and asynchronous actions: Redux Thunk and Redux Saga. In this post we’ll introduce the former: Redux Thunk.

redux-thunk:- Redux Thunk is a middleware that lets you call action creators that return a function instead of an action object. That function receives the store’s dispatch method, which is then used to dispatch regular synchronous actions inside the body of the function once the asynchronous operations have completed. Next react-redux.

react-redux:- React Redux is the official React binding for Redux. It lets your React components read data from a Redux store, and dispatch actions to the store to update data.

Provider:-

connect:-

Structure tree of store

Create a folder store in src makes and 2 other folders in-store one is actions another is reducers in action folder, we will write actions related code in action folder and in reducers folder write reducer related.

STRUCTURE:-

src
|____store
| |____actions
| | |____drawerActions.js
| | |____types.js
| |____index.js
| |____reducers
| | |____drawerReducer.js
| | |____index.js

There is the code of all these files:-

Apply store on all app:-

App.js

import React from "react";
import { BrowserRouter as Router, Route, Redirect, Switch } from "react-router-dom";
import HomePage from "../src/Pages/HomePage";
import ContactUs from "./Components/ContactUs"
import AboutUs from "./Components/AboutUs"
import TermsAndConditions from "./Components/TermsAndConditions";
import PrivacyPolicy from "./Components/PrivacyPolicy";
import { Provider } from 'react-redux';
import store from "./store";
const App = () => {
  return (
    <Provider store={store}>
      <Router>
        <Switch>
          <Route exact path="/" component={HomePage} />
          <Route exact path="/ContactUs" component={ContactUs} />
          <Route exact path="/AboutUs" component={AboutUs} />
          <Route exact path="/terms.html" component={TermsAndConditions} />
          <Route exact path="/privacy.html" component={PrivacyPolicy} />
          <Route path='*' render={() => <Redirect to={{ pathname: "/" }} />} />
        </Switch>
      </Router>
    </Provider>
  );
};

Feel free to ask any questions or queries in the comment section or you can ping me on Facebook.