How to Create and Use Redux Store in React 18

Last Updated on by in React JS

In this tutorial, we will learn how to create a Redux Store in React application. At the same time, we will share how to use the Redux store in React to manage the complex states.

Apart from that, we will also learn how to create a slice state using the redux toolkit module.

Redux is a popular open-source JavaScript library used for managing the application state.

Redux empowers React and allows you to create user interfaces. React Redux is the official React binding for Redux.

Redux provides a store that we integrate into React using the Provider component. It lets you read the data from a Redux Store and dispatch Actions to the Store to update the state.

How to Build Redux Store and Manage Complex State in React Js

  • Step 1: Create React Application
  • Step 2: Install React Redux Module
  • Step 3: Wrap App with Redux Provider
  • Step 4: Create Redux Store
  • Step 5: Create Redux State Slice Reducer
  • Step 6: Register State Slice in Store
  • Step 7: Use Redux State in React Component
  • Step 7: View App on Browser

Create React Application

Open the terminal, enter the given command on the console then run the command to install the create-react-app tool:

npm install create-react-app --global

Now, we need to execute the given command to create a brand new react application.

npx create-react-app react-demo

Move into the project folder:

cd react-demo

Install React Redux Module

To create a redux store in React, we will simultaneously install react-redux and redux toolkit.

npm install react-redux @reduxjs/toolkit --legacy-peer-deps

Wrap App with Redux Provider

React Redux offers a Provider component. It proliferates the Redux store in the React app and allows making the store available throughout the react app.

Also, import the redux store component, and add to the Provider component.

Add the given code into the src/index.js file:

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>,
)

Create Redux Store

In the src directory, create the store folder, and create a new file named index.js.

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '../reducers/counterSlice'

export default configureStore({
  reducer: {
    counter: ,
  },
})

configureStore(): wraps createStore to provide simplified configuration options and good defaults.

It automatically adds or combines your slice reducers and adds whatever Redux middleware you supply. It includes redux-thunk by default and enables the use of the Redux DevTools Extension.

Create Redux State Slice Reducer

Next, make reducers/ folder, then create a file named counterSlice.js and insert the given code into it.

import { createSlice } from '@reduxjs/toolkit'

export const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
  },
  reducers: {
    increment: (state) => {
      state.value += 1
    },
    decrement: (state) => {
      state.value = state.value - 1
    },
  },
})

export const { increment, decrement } = counterSlice.actions

export default counterSlice.reducer

createSlice(): accepts an object of reducer functions, a slice name, and an initial state value, and automatically generates a slice reducer with corresponding action creators and action types.

Register State Slice in Store

In this step, we will add the slice reducer to the counter property. Insert the following code into the store/index.js file.

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '../reducers/counterSlice'

export default configureStore({
  reducer: {
    counter: counterReducer,
  },
})

Use Redux State in React Component

Open the App.js file and add the following code into the file. In this file, we will show you how to use React Redux store in React component.

import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import './App.css'
import { useSelector, useDispatch } from 'react-redux'
import { increment, decrement } from './reducers/counterSlice'

function App() {
  const count = useSelector((state) => state.counter.value)

  const dispatch = useDispatch()
  return (
    <div className="App container mt-5 text-center">
      <h2 className="mb-3">React Js Redux Store with Slice State Examle</h2>
      <p className="h1">{count}</p>
      <button
        onClick={() => {
          dispatch(increment())
        }}
        className="me-2 btn btn-primary"
      >
        Increment
      </button>

      <button
        onClick={() => {
          dispatch(decrement())
        }}
        className="me-2 btn btn-danger"
      >
        Decrement
      </button>
    </div>
  )
}

export default App

View App on Browser

In this step, we will show you how to run the development server.

npm start

After the above command invoked, test the app using the given url.

http://localhost:3000

How to Create and Use Redux Store in React Js

Conclusion

In this tutorial, you have discovered how to set up the redux store in React js application using the React Redux, and Redux Toolkit modules.

Redux manages the data in React through a unidirectional data flow model. React Redux is easy to implement in React. It ideally subscribes to the Redux store and checks if the data of your component changed and re-renders your component.