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:
- Configuring a Redux store is as well complex.
- Addition of many packages to acquire Redux to do anything useful.
- Redux needs too much boilerplate code.
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:
createAction:
It has an action type string and returns an action creator function, which uses that type.
createReducer:
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
- Redux Toolkit is the best option to use when getting started with Redux.
- It makes simpler the code and supports managing the Redux state by decreasing the boilerplate code.
- Same as Redux, Redux Toolkit is not made only for React.
- We may use it with any other framework for example Angular.