How to Set Up Redux Store using Redux Toolkit in React

This comprehensive guide reveals how to set up the Redux store in React app from scratch.

We will step by step explain how to create a redux slice and connect to the redux store in React js application.

Redux is a powerful state management library that allows you to build a global or central state management system that helps update the UI or app state in React js app.

The primary reason behind using Redux in React is when you have to use a particular state globally in your app.

In that case, making the single state available throughout the app is pretty much tricky. We have heard a lot about props object and context apis, but these paradigms are only great when your app size is insignificant.

How to Configure Redux Store in React Js

  • Step 1: Install React Project
  • Step 2: Install Redux Modules
  • Step 3: Wrap React App with Store Provider
  • Step 4: Build Store File
  • Step 5: Set Up Reducer with Slice
  • Step 6: Access Redux State
  • Step 7: Run React App

Install React Project

The React app is the standard tool you need to get started with React development, and it can be created using the provided command.

npx create-react-app react-blog
cd react-blog

Install Redux Modules

The provided commands allow you to install redux libraries. We are installing react-redux and react toolkit modules.

npm install @reduxjs/toolkit react-redux 

Wrap React App with Store Provider

Let’s provide the Redux Store to React. Open the src/index.js file, and import the Redux store that we are going to create very soon. Wrap a Provider around the main App and define the store as a prop.

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(
    <Provider store={store}>
      <App />
    </Provider>
)

Build Store File

You have to make the store directory in the src folder. Make sure to make a file name it index.js, then add the provided code into the file.

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

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

Set Up Reducer with Slice

In the previous step, we created the store, and we already added the countClickerReducer in that file.

In this step, we will be creating a reducers directory and also make a counterSlice.js file where we will be creating a reducer object with add and minus action creator objects. This file returns the add and minus actions.

import { createSlice } from '@reduxjs/toolkit'

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

export const { add, minus } = counterSlice.actions

export default counterSlice.reducer

Access Redux State

Head over to the main App.js file, in this file we will import the useSelector, and useDispatch modules. The useSelector module reads the redux store values or state, whereas the useDispatch module dispatch the actions from the component and updates the state.

import './App.css'
import { useSelector, useDispatch } from 'react-redux'
import { add, minus } from './reducers/counterSlice'

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

  const dispatch = useDispatch()
  
  return (
    <div>
      <h2>React Redux Store Set Up Example</h2>
      <p>{countInfo}</p>
      <button
        onClick={() => {
          dispatch(add())
        }}
      >
        Increase
      </button>

      <button
        onClick={() => {
          dispatch(minus())
        }}
      >
        Decrease
      </button>
    </div>
  )
}

export default App

Run React App

The npm start command starts the development server and makes it available for your react js app.

npm start
http://localhost:3000

How to Set Up Redux Store using Redux Toolkit in React

Summary

In this essential guide, we learned how to create a simple React app, install redux libraries, set up the redux store from very basic, create the action creator object and try to access the store state that is being updated using the dispatch methods.