Simple Guide to Redux Toolkit with React-Redux

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

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

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

Considering 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, now we will create a store.js file in our src --> redux folder, this basically aims to configure our store, it includes the redux-thunk by default and also enables the use of Redux DevTools Extension.
In this store, we'll import configureStore() from redux-toolkit and export the default reducer. The code looks like this:

import { configureStore } from "@reduxjs/toolkit"

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

Also, 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 in the following manner:
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 in our case and here we'll make use of the createSlice() function, define the initial state value and automatically generates a slice reducer with corresponding action creators and action types.
The calculator.js will have the action creator for the even numbers calculation in the following manner:

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";

Now we'll make use of our action creators in the App.js file through the useDispatch() and useSelector() functions from 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 this application. It is a very simple app but explains the use of redux-toolkit in a very friendly manner.
I hope you will find this useful.

Below is the link to the codesandbox url where you can find the code for this application:
https://codesandbox.io/s/eager-borg-26rgl

Happy coding...