How to use Redux Toolkit with React-Redux

The Redux feature in React helps us to keep track of state changes in our application and deal with larger, more complex environments(in terms of application size) in a robust and easy-to-understand manner.

Though React’s Redux Toolkit package is also targeted towards creating a store and tracking the state changes from there, it is simpler and the configuration process (boiler-plate code) is much less than the traditional redux code.

In this shot, we will go through the redux-toolkit package, its installation, and how it keeps track of the state changes in our application. Our application will display even numbers by keeping the evenCalculator in the reducer of our app.

This shot assumes that you already have a React app created.

We will now install the redux-toolkit package by running the following command in the terminal:

npm install @reduxjs/toolkit

or

yarn add @reduxjs/toolkit

Once we have installed the toolkit, we will create a store.js filethis basically aims to configure our store; it includes the redux-thunk by default and also enables the use of Redux DevTools Extension. our src --> redux folder. In this store, we’ll import configureStore() from the redux-toolkit and export the default reducer. The code looks like this:

import { configureStore } from "@reduxjs/toolkit"

export default configureStore({
  reducer: {}
});

Additionally, we have to wrap the App component in the Provider function from react-redux in order to be able to access the state from the redux store. This process is shown below: index.js file:

import { StrictMode } from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import App from "./App";
import store from "./redux/store";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </StrictMode>,
  rootElement
);

Now, we’ll create another file in the same reducer folder – it will be called calculator.js. Here we’ll make use of the createSlice() function, define the initial state value, and automatically generate a slice reducer with corresponding action creators and action types. The calculator.js folder will use the action creator to calculate even numbers. This process is shown below:

import { createSlice } from "@reduxjs/toolkit";

export const calcSlice = createSlice({
  name: "calc",
  initialState: {
    calc: 0,
  },
  reducers: {
    evenCalculator: (state) => {
      state.calc += 2;
    },
  }
});

// Action creators are generated for each case reducer function
export const { evenCalculator } = calcSlice.actions;
export default calcSlice.reducer;

Also, we have to import this reducer in the store.js file as:

import calcReducer from "./calculator";

Next, we’ll make use of our action creators in the App.js file through the useDispatch() and useSelector() functions from the react-redux App.js file:

import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { evenCalculator } from "./redux/calculator";
import "./styles.css";

export default function App() {
  const { calc } = useSelector((state) => state.calc);
  const dispatch = useDispatch();
  return (
    <div className="App">
      <h1> The count is: {calc}</h1>
      <button onClick={() => dispatch(evenCalculator())}>Display Even Numbers</button>
    </div>
  );
}

This brings us to the end of the application. Although it is a very simple app, it explains the use of redux-toolkit in a very friendly manner.

I hope you find this useful!