We’ll be going over the store/ folder in depth. The libraries we are using are Redux and Redux-Toolkit, which is an extension of Redux that provides a lot more.

Introduction

Redux is used for state management, and primarily used as a centralized state. Meaning that all components will have access to this “global” store. Please read about Redux first!

Redux

We won’t be talking about the slice & thunks used for authentication since that’ll be discussed in a later guide.

Defining the store

Please reference this file. We need to create the store to hold our slices. Here is the barebones code for doing so

import { configureStore } from '@reduxjs/toolkit'

import authReducer from 'store/slices/authSlice'
import counterReducer from 'store/slices/counterSlice'

const store = configureStore({
  reducer: {
    counter: counterReducer,
    authState: authReducer,
  },
})

export type RootState = ReturnType<typeof store.getState>
export type DispatchType = typeof store.dispatch

export default store

We need to type the root state (with all the slice states) and the dispatch types to be used in the UI (component) code.

We import the reducer functions for each slice, which contains all the defined reducers in each state, so that we can combine them to be used in the store.

Creating the slice

Defining types

Refer here when creating the slice. We first need to define the types for the slice state and also the payload for our reducers.

interface ICounterState {
  count: number
}

interface IPayload {
  amount: number
}

Initializing the state

We need to initialize the default state for our slice

const initialState: ICounterState = {
  count: 0
}

Simply create an object with default state values. In this case, we are only keeping track of a count number, so we initialize it as 0.

Creating reducers