How to use Redux Toolkit with React

Last updated : Jul 30, 2023 12:00 AM

Redux toolkit simplifies the usage of redux by providing a user-friendly interface. Here is how to use the Redux toolkit with a simple example.

Add Redux toolkit to an existing project.

yarn add @reduxjs/toolkit
or
npm install @reduxjs/toolkit

I still need react-redux to use the Redux toolkit with React. So, if you don't have it installed, here are the commands

yarn add react-redux
or
npm install react-redux

Alternatively, add the below entries to your package.json and run the yarn or npm update command.

"@reduxjs/toolkit": "^1.9.1",
"react-redux": "^8.0.5"

Create a state object.

The state object holds the application state. My application state consists of LoginState and CreditState, each with its initial state.

State object

export interface LoginState {
   isLoggedIn: boolean
   isVarfied: boolean
}
export const initialLoginState: LoginState = {
   isLoggedIn: false,
   isVarfied: false
}

export interface CreditState {
   creditsLeft: number
   renewalDate: string
}
export const initialCreditState: CreditState = {
   creditsLeft: 100,
   renewalDate: "10-24-2024"
}

Creating slices in Redux Toolkit.

A slice in Redux Toolkit handles a portion of the state. My state has two sections, LoginState and CreditState. Therefore, I need two slices. The loginSlice handles the LoginState, and the creditSlice handles the CreditState. Each slice has its reducers defined under the reducers property.

Redux slices

import { createSlice, PayloadAction } from '@reduxjs/toolkit'
import { CreditState, initialCreditState, initialLoginState, LoginState } from './state'

export const loginSlice = createSlice({
   name: 'login',
   initialState: initialLoginState,
   reducers: {
      setLoginState (state: LoginState, action: PayloadAction<LoginState>) {
         state.isLoggedIn = action.payload.isLoggedIn
         state.isVarfied = action.payload.isVarfied
         //return action.payload
      },
      setIsLoggedIn (state: LoginState, action: PayloadAction<boolean>) {
         state.isLoggedIn = action.payload
      },
      setIsVarfied (state: LoginState, action: PayloadAction<boolean>) {
         state.isVarfied = action.payload
      }
   }
})

export const creditSlice = createSlice({
   name: 'credit',
   initialState: initialCreditState,
   reducers: {
      setCreditsLeft (state: CreditState, action: PayloadAction<number>) {
         state.creditsLeft = action.payload
      },
      setCreditsRenewal (state: CreditState, action: PayloadAction<string>) {
         state.renewalDate = action.payload
      },
   }
})
export const loginSliceActions = loginSlice.actions
export const creditSliceActions = creditSlice.actions

Creating the store in Redux Toolkit.

Like in plain vanilla Redux, I need a store that maps my reducers to the state. The configureStore accepts an object with a reducer property. That allows me to pass all the reducers I defined in my state slices.

Redux store

import { configureStore } from '@reduxjs/toolkit'
import { creditSlice, loginSlice } from './reducers'

export const store = configureStore({
   reducer: {
      login: loginSlice.reducer,
      credit: creditSlice.reducer
   }
})

export default store
export type State = ReturnType<typeof store.getState>

Introducing the Redux provider.

Now it is time to introduce the state to my app components. I can do that in index.tsx or App.tsx.

Redux provider

import { Provider } from "react-redux";
import { Credit } from "./layout/credit_status";
import { Login } from "./layout/login_status";
import store from "./store/store";

const App = () => {
   return <Provider store={store}>
      <Login />
      <Credit />
      </Provider>
}
export default App;

Using the Redux state in components.

Now I am ready to use the state in my react components. The code below explains how to subscribe to the state and dispatch actions to change the state.

import { useDispatch, useSelector } from "react-redux"
import { loginSliceActions } from "../store/reducers";
import { State } from "../store/store";
export const Login = () => {
   const loginState = useSelector((state: State) => state.login)
   const dispatch = useDispatch();

   return (
      <>
         <p>Login status: {loginState.isLoggedIn ? "Logged-in" : "Logged-out"}</p>
         <p>Varification status: {loginState.isVarfied ? "Varified" : "Not Varified"}</p>
         <p><button onClick={() => dispatch(loginSliceActions.setIsLoggedIn(true))}>Set as Logged-in</button></p>
         <p><button onClick={() => dispatch(loginSliceActions.setIsVarfied(true))}>Set as varified</button></p>
         <p><button onClick={() => dispatch(loginSliceActions.setLoginState({isLoggedIn: false, isVarfied: false}))}>reset Login state</button></p>
      </>
   )
}

import { useDispatch, useSelector } from "react-redux";
import { creditSliceActions } from "../store/reducers";
import { State } from "../store/store";
export const Credit = () => {
   const creditState = useSelector((state: State) => state.credit)
   const dispatch = useDispatch();

   return (
      <>
         <p>Credits left: {creditState.creditsLeft}</p>
         <p>Varification status: {creditState.renewalDate}</p>
         <p><button onClick={() => dispatch(creditSliceActions.setCreditsLeft(creditState.creditsLeft + 100))}>Increase credit</button></p>
         <p><button onClick={() => dispatch(creditSliceActions.setCreditsRenewal("10-24-2023"))}>Change renewal date</button></p>
      </>
   )
}