Redux is a light weighted State Management Tool that helps the components in our React App to communicate with each other. The simple concept behind this is that every state of the component is kept in a store that will be global. So that every component can access any state from that store.

Cover Image

In this blog, let’s see a simple example of React-Redux. The logic is to increment and decrement a number on a button click with React-Redux.

---

Table of Contents

• Creating React App and Initial Setup
• Designing Our View
• Connecting React To Redux
• Dispatching Actions

---

1. Creating React App and Initial Setup

Initially, let’s create a new React App. Also, check if everything is fine with the created project.

npx create-react-app reactapp
cd reactapp

Now let’s install Redux.

npm install redux
npm install react-redux
npm start

Now open http://localhost:3000/ and check if the server starts well. Now let’s create our views.

2. Designing Our View

Here, I am creating a simple React Class Component named Counter.jswith two buttons and a text where one button is for incrementing and the other is for decrementing. The incremented and decremented values will be displayed in the paragraph tag.

src/Counter.js

import React, { Component } from 'react'

export default class Counter extends Component {
render() {
  return ( 
      <div>
          <h1>Counter</h1>

          <button style={{ height: '40px', width: '150px' }}>Increment + </button>

          <p>4</p>

          <button style={{ height: '40px', width: '150px' }}>Decrement - </button>
      </div>
    )
  }
}

After creating the Counter view, I am including the Counter component in my App.js file.

src/App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Counter from './Counter'
function App() {
  return (
    <div className="App">
      <Counter />
    </div>
  );
}
export default App;

Now open your browser and navigate to http://localhost:3000/. You must see something like this.

#react-redux #react #redux #reducer #javascript