Redux Store Integration Example in React JS

In this guide, you will learn how to set up a Redux store in a react application with a simple example implementation. We will discuss how to control the Redux state to share information.

Redux library is used for the management of the application central state which is placed in a store.

React Redux is exclusively maintained for integration of the Redux store in react applications.

By using the dispatch actions we can easily store data or update the state, whereas provider components are used to read data from the store.

How to Add Redux Store in React Application?

Step 1 – Create React App

Step 2 – Install React Redux Library

Step 3 – Provide Redux in React App

Step 4 – Setup Redux Store

Step 5 – Setup State Reducer

Step 6 – Imply Redux State in React

Step 7 – See In Action

 

Create React App

Before creating the react app, make sure you have installed the create-react-app:

npm install create-react-app --global

 

Next, create a new react app by executing the below command:

npx create-react-app react-redux-app

 

Move inside the application directory

cd react-redux-app

 

Install React Redux Library

To integrate the redux store, install the react-redux and toolkit library by executing the below command for both:

npm install react-redux @reduxjs/toolkit

 

Provide Redux in React App

Now, we will wrap React’s main component with Redux Provider to set up a store. This store will now be available across the application for communication via action dispatchers.

Open the index.js file and wrap <App /> with <Provider> component:

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import App from './App'
import { Provider } from 'react-redux'
import store from './store/index'
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
)

 

Setup State Reducer

Under the src folder create the reducers folder and a new file named stepper-reducer.js and update its content as below:

// src/reducers/stepper-reducer.js
import { createSlice } from "@reduxjs/toolkit";
export const stepper = createSlice({
  name: "stepper",
  initialState: {
    value: 0,
  },
  reducers: {
    up: (state) => {
      state.value += 1;
    },
    down: (state) => {
      state.value -= 1;
    },
  },
});
export const { up, down } = stepper.actions;
export default stepper.reducer;

 

Setup Redux Store

Now, we will set up the store configuration. Under the src folder, create store directory with a file named index.js and update it with the below content:

// src/store/index.js
import { configureStore } from "@reduxjs/toolkit";
import stepperReducer from "../reducers/stepper-reducer";
export default configureStore({
  reducer: {
    stepper: stepperReducer,
  },
});

The configureStore() helps to compile all the reducers and helps in an easy configuration in one place.

 

Imply Redux State in React

Next, we will utilize the up() and down() state actions to fetch steps value using the useSelector and useDispath function provided by the react-redux.

Open the App.js file and update it with following:

import "./App.css";
import { useSelector, useDispatch } from "react-redux";
import { up, down } from "./reducers/stepper-reducer";
function App() {
  const steps = useSelector((state) => state.stepper.value);
  const dispatch = useDispatch();
  return (
    <div className="wrap">
      <h4>React Js Redux Store State Management Example</h4>
      <button
        onClick={() => {
          dispatch(up());
        }}
      >
        Up
      </button>
      <div>{steps}</div>
      <button
        onClick={() => {
          dispatch(down());
        }}
      >
        Down
      </button>
    </div>
  );
}
export default App;

 

See In Action

We are ready to run the application, execute the following command to run the development web server:

npm start

It will run the app at the following URL:

http://localhost:3000/

 

 

Conclusion

We discussed how to implement the Redux store in a React js application from scratch using a step-by-step procedure. With the help of react-redux and Redux toolkit modules, it becomes very easy to implement in a snap.

Leave a Reply

Your email address will not be published. Required fields are marked *