Getting Started with Redux Toolkit

What is Redux ?

Redux is a state management library that acts like a container external to other components in the application, that stores states where components can access them without having to pass variables from component to component.

Why Redux Toolkit ?

it is a simpler and better way of writing redux logic. It speeds up development because it already includes packages that are necessary for building redux apps.

Main Features of Redux Toolkit API

configureStore

Creates a redux store that takes in an object as a parameter and keeps all working reducers.

createAction

Accepts an action type string and returns an action creator function that uses that type.

createReducer

Accepts an initial state value and creates a reducer that handles all actions.

createSlice

As you will see subsequently, we will include all the above functions in a slice, which is essentially like a container function for states, actions, and reducers.

Flow Of Redux In order to get started with Redux, there are some basic steps that you would follow to have Redux running in your system.

Install Redux Toolkit

npm install @reduxjs/toolkit react-redux

Create a Redux Store

This creates a Redux store, and also automatically configure the Redux DevTools extension so that you can inspect the store while developing.

import { configureStore } from '@reduxjs/toolkit'

export const store = configureStore({
  reducer: {},
})

Provide Store in React App

Another essential step, which is equally part of setup, is to pass in a provider component in our React app that would take in that store. We need to make sure that it is above the app component, so that every child of the provider inside the app gets access to any variable in that store.

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import { store } from './app/store'
import { Provider } from 'react-redux'

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

Create a Redux State Slice

Add a new file named src/features/counter/counterSlice.js. In that file, import the createSlice API from Redux Toolkit.

import { createSlice } from "@reduxjs/toolkit";
export const counterSlice = createSlice({
  name: "counter",
  initialState: {
    count: 0
  },
  reducers: {
    increment: (state) => {
      state.count += 1;
    },
    decrement: (state) => {
      state.count -= 1;
    }
  }
});

Add Slice Reducers to the Store

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

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

Add Dispatch Functions in the UI

Now that we have read all necessary variables from the store, we would want to call the increment and decrement actions to get our app fully working. We need to use another hook from the react-redux store, which is the dispatch hook.

We can read data from the store with useSelector, and dispatch actions using useDispatch.

These were the basic steps by which you can add redux toolkit to your project.