Introduction Of Redux Toolkit

Introduction

Redux Toolkit is a dogmatic, sequences-included toolset for well-organized redux development. Redux has developed a valued asset for handling a global React state. It was shaped to support address three common concerns about Redux:

In this post, we will realize why the Redux Toolkit rates more consideration in the React community.

Description

React and Redux are thought to be the finest arrangement for managing state in extensive React applications. Dan Abramov is a creator of Redux. He instructs in his published article that people use Redux only when requires. Also to follow other approaches when developing less difficult applications.

Redux Tool Kit makes available some options to configure the global store. It creates actions and reducers more efficiently by extracting the Redux API as much as thinkable.

Redux Tool Kit contains

  • This derives from some useful packages installed with it like Immer, Redux-Thunk, and Reselect.
  • It makes life relaxed for React developers as lets them mutate state directly.
  • It applies middleware like Thunk that handles async actions.
  • Similarly, it uses Reselect, a simple selector library for Redux, to make simpler reducer functions.

Redux Tool Kit API functions

We may use the below APIs to make simpler the boilerplate code in Redux. That is particularly using the create action and create reduced methods. On the other hand, this may be further streamlined using createSlice that automatically makes action creator and reducer functions.

ConfigureStore:

It makes a Redux store instance similar to the original createStore from Redux. However, it takes a named options object and sets up the Redux DevTools Extension automatically.

createAction:

It has an action type string and returns an action creator function, which uses that type.

createReducer:

It has an early state value and a lookup table of action types to reducer functions. It makes a reducer that handles all action types.

createSlice:

It accepts an original state and a lookup table with reducer names and functions. It automatically creates action creator functions, action type strings, and a reducer function.

Reducers and actions appear in traditional React-Redux applications

Actions

import {GET_USERS,CREATE_USER,DELETE_USER} from "../constant/constants";export const GetUsers = (data) => (dispatch) => {
 dispatch({
  type: GET_USERS,
  payload: data,
 });
};export const CreateUser = (data) => (dispatch) => {
 dispatch({
  type: CREATE_USER,
  payload: data,
 });
};export const DeleteUser = (data) => (dispatch) => {
 dispatch({
  type: DELETE_USER,
  payload: data,
 });
};

Reducers

import {GET_USERS,CREATE_USER,DELETE_USER} from "../constant/constants";const initialState = {
 errorMessage: "",
 loading: false,
 users:[]
};const UserReducer = (state = initialState, { payload }) => {
switch (type) {
 case GET_USERS:
  return { ...state, users: payload, loading: false };
case CREATE_USER:
  return { ...state, users: [payload,...state.users],
 loading: false };
case DELETE_USER:
  return { ...state, 
  users: state.users.filter((user) => user.id !== payload.id),
, loading: false };
default:
  return state;
 }
};export default UserReducer;

Simplification of the same functionality by using createSlice.

import { createSlice } from '@reduxjs/toolkit';export const initialState = {
  users: [],
  loading: false,
  error: false,
};const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    getUser: (state, action) => {
      state.users = action.payload;
      state.loading = true;
      state.error = false;
    },
    createUser: (state, action) => {
      state.users.unshift(action.payload);
      state.loading = false;
    },
    deleteUser: (state, action) => {
      state.users.filter((user) => user.id !== action.payload.id);
      state.loading = false;
    },
  },
});export const { createUser, deleteUser, getUser } = userSlice.actions;export default userSlice.reducer;

Meanwhile, a slice makes the actions and reducers we can export them. Use them in the component and in Store to configure the Redux deprived of having distinct files and directories for actions and reducers as below.

import { configureStore } from "@reduxjs/toolkit";
import userSlice from "./features/user/userSlice";export default configureStore({
 reducer: {
  user: userSlice,
 },
});

Conclusion