Since I started my career in the development field I have started learning with very small steps, and one by one learning new things and creating applications in react. I have only used create-react-app and simple templates in it. I never try to add a new thing to my project.

After some project research, I saw lots of people using react with redux and then I started one project with redux. just like react-redux is also the library which is also widely used in front-end development. Redux is basically a tool that manages UI states and data states.

So here I am now, writing a blog about Redux and how it should be used in React.

Creating a new React Project by adding Redux into it.

Create a new react project using these commands:

# Redux + Plain JS template
npx create-react-app my-app --template redux

# Redux + TypeScript template
npx create-react-app my-app --template redux-typescript

Now you see the output of the default create-react-app.

For Existing Project

/ if you use npm:
npm install react-redux

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

You'll also need to install Redux and set up a Redux store in your app.

React Redux uses Provider, which makes the redux store available everywhere in the project.

Import the store in App.js

The above code import the createStore function from Redux, which allows us to pass the store down to the App method to access the Redux store.

As a result, Redux offers a function, createStore(), which returns an instance of a Redux store. It accepts a reducer as a parameter.

Folder Structure showing like this:

First, we need to set up the index.js file

• We need to Import all the Components.
• We called the store inside the provider.

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore } from "redux";
import reducer from "./reducer";
import App from "./App";

import "./styles.css";

let store = createStore(reducer);

const rootElement = document.getElementById("root");
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  rootElement
);

Now create a reducer.js file and need to declare an action for the corresponding functions of the button clicks.

• INCREMENT_COUNT is the action that triggers by clicking the “Increment” button. Here the count becomes count + 1.
• DECREMENT_COUNT is the action that triggers by clicking the “Decrement” button. Here the count becomes count – 1.

let initialState = { count: 0 };

function reducer(state = initialState, action) {
  if (action.type === "INCREMENT_COUNT") {
    return {
      count: state.count + 1
    };
  }
  if (action.type === "DECREMENT_COUNT") {
    return {
      count: state.count - 1
    };
  }
  return state;
}
export default reducer;

Now we add state according to nd set the count value to 0 in app.js

• Here we initialize the default value of count as 0.
• Switching statements set the state according to the action type

import React from "react";
import { connect } from "react-redux";

class App extends React.Component {
  increment = () => {
    this.props.dispatch({
      type: "INCREMENT_COUNT"
    });
  };

  decrement = () => {
    this.props.dispatch({
      type: "DECREMENT_COUNT"
    });
  };

  render() {
    return (
      <div className="App mt-5">
        <button onClick={this.increment} className="btn btn-success mr-5">
          Increment
        </button>
        <button onClick={this.decrement} className="btn btn-danger">
          Decrement
        </button>
        <h2 className="mt-5 display-1">{this.props.count}</h2>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    count: state.count
  };
};

export default connect(mapStateToProps)(App);

Final Result

Have a Nice code!