Redux vs Redux Toolkit - Used in react and react-native

Table of contents

1. Redux Toolkit Introduction
2. Comparison between createReducer over traditional Reducer approach
3. Comparison between createAction over traditional actionCreator
4. createSlice() in RTK

Introduction

In reality, #redux in its most basic form is quite simple and easy to grasp. One of the most common and enduring criticisms of #redux is the amount of #code it adds to the #app, which many believe is #unnecessary. To overcome this, the #reduxjs team has put in a tremendous amount of effort and, without a doubt, has produced an outstanding result with Redux Toolkit.

However, the #redux Team recently released #redux #toolkit , an #officially recommended and #SOPE #library (Simple, Opinionated, Powerful, and Effective state management library). It enables us to write more #efficient code, #accelerate #development, and automatically apply best #practices. It was #primarily #designed to address #Redux's #THREE #MAJOR #ISSUES:

1. It is too difficult to set up a #redux store.
2. To create a #largescale #application, many #packages must be added.
3. Redux requires far too much #boilerplate #code, making it difficult to write #efficient and #cleancode .

Redux Toolkit includes the following features:

• immer.js => a library/tool to handle immutability in stores.
• redux => For state management
• redux-thunk =>For async tasks
• reselect => To select a slice from the global store.
• Redux Dev-tools Extension is automatically supported.

Install:

# NPM

npm install @reduxjs/toolkit

# Yarn

yarn add @reduxjs/toolkit

What Extra Features Are Provided:

• configureStore() #function automatically supports Redux-thunk, Redux #DevTools #Extension, and passes the default #middleware.
• createReducer() is a #utility that provides immer #library support that allows writing the #immutable #code #mutably.
• createAction() #utility that returns an action creator function.
• createSlice() #function is useful for replacing the create action and create Reducer functions with a single function.
• createAsyncThunk() that takes #redux strings as arguments and returns a #promise .
• createEntityAdapter() utility facilitates #CRUD #operations.

#RTK employs the ducks #pattern, combining #reducers, #actions, and #constants into a single #file known as a #slice. Each #slice will provide an #initial #state and a #reducer #function for an #object in #store.

As you can see, there are certain disadvantages.

Smarter #Redux with #Redux #Toolkit

When #redux initially arrived on the #frontend #horizon, many people anticipated it to solve all of our #statemanagement issues. Its connection to #React was so strong that some people began to feel that React was incomplete without #Redux, while Redux author Dan Abramov publicly denied this notion.

#Developers gradually became aware of Redux's limits, which sparked a #debate about whether there are better ways to manage #global state — and, indeed, whether Redux is a viable solution in the first place.

Many of the arguments against Redux stemmed from a variety of perspectives and "best practices" that were eventually deemed mandatory. (In reality, Redux is quite basic and easy to comprehend in its simplest form.) However, one of the most common and ongoing criticisms is the amount of code Redux adds to the app, which many believe is unnecessary.

Those #discussions resulted in the creation of Redux Toolkit (RTK), which is described as "the official, opinionated, batteries-included toolkit for efficient Redux development." The Redux team put in a lot of work on this, and the outcome is undeniably impressive.

Many of the issues about #boilerplate and #redundant #code are resolved with #RTK. As stated in its official documentation, it aids in the resolution of #three #primary #issues with #redux :

1. "Setting up a Redux store is rather difficult."
2. "I need to install a lot of #packages before #Redux can do anything meaningful."
3. "Redux requires far too much boilerplate #code."

In this section, we'll look at how we can use RTK's API to make our Redux applications smaller yet staying strong. As a starting point for our transformation, we'll use the container-presentation pattern and Redux setup from react-boilerplate. I've been using react-boilerplate for a long time, and it's helped me swiftly bootstrap large-scale projects. It has the following container architecture:

• Redux: For state management
• Reselect: For selecting a slice out of global store
• Immer: For handling immutability in stores
• Redux-Saga: For async tasks

One thing to keep in mind: Redux-Thunk is offered as a default option for #async #tasks in RTK and is strongly recommended for simple #data #fetching #operations.

RTK follows the ducks pattern, combining #reducers, #actions, and #constants into a #single #file known as a #slice. Each slice will provide an #initial #state and a #reducer #function for an #object in #store.

If you like this article post, please hit 'like' and share. Show some love by engaging the posts.