Why Redux Toolkit is preferred over Redux ?

While working as a Front-end Developer or Full Stack Developer, many engineers encountered Redux. But Recently Redux Team launched Redux Toolkit(RTK), an officially recommended SOPE library that stands for Simple, Opinionated, Powerful, and Effective state management library. It allows us to write more efficient code, speed up the development process, and automatically apply the best-recommended practices. It is recommended by the Redux Developers Team.

Redux:

Redux is a state management tool that makes it easier to pass data between components. Redux provides a store which makes the state inside components easier to maintain. Along with stores, react-redux introduces actions and reducers which work simultaneously with stores to make the state more predictable

Redux ToolKit(RTK):

Redux Toolkit is used for writing redux code but in a more concise way. Redux Toolkit (RTK) solves problems that most of the developer’s face who used redux in a react application. RTK abstracts the basic redux code and provides us boilerplates that enable us to write redux code in less lines of code

Issues with basic Redux:

• Configuring a Redux store is too complicated
• Have to add a lot of packages to build a large-scale application
• Redux requires too much boilerplate code which makes it cumbersome to write efficient and clean code.

Reasons for preferring RTK(Redux ToolKit):

• Redux ToolKit solves various issues by providing a hook-based implementation of Redux 
• RTK gives the ability to write mutable state updates in the reducers.
• It also eliminates the use of extra coding by providing boilerplates.
• RTK also has the feature of RTK query which eliminates the use of Thunks and makes the query processing faster
• It also provides automatic support for Redux Dev-tools Extension and for immer.js library which is a great tool to deal with immutable objects. 
• You can also use the various predefined functions of Redux Toolkit which not only speeds up the process but also saves time.

Dependencies Included with RTK(Redux ToolKit):

• immer
• redux
• redux-thunk
• reselect

To install RTK(Redux ToolKit) in the existing project use the command

# NPM
npm install @reduxjs/toolkit# Yarn
yarn add @reduxjs/toolkit

To create a new project with RTK use the command:

npx create-react-app my-app --template redux

Important features provided with RTK:

• Automatic support for Redux-thunk, Redux DevTools Extension, and default middleware is provided by configureStore() function
• Support for the immer library that allows writing the immutable code mutably is provided by createReducer() utility.
• create action and create Reducer functions are replaced with a single function called createSlice() function.
• createAsyncThunk() that takes Redux strings as arguments and returns a Promise.
• CRUD operations are performed using createEntityAdapter() utility.

Comparison Between Redux and Redux Toolkit in React:

Comparing Store and Reducers

• Redux: Creating Store and reducers.
• Redux Toolkit: Creating Store and reducers.

// Redux
const addHandler=(state=0,action)=>{
if(action.type==='ADD')
{
    return state+1;
}
return state;
}

const store = createStore(addHandler);

store.dispatch({type:'ADD'});

// Resux Toolkit
// Action Creators
const add = createAction('ADD'); 

const addHandler = createReducer(0, {  
  [add]: state => state + 1
})

const store = configureStore({
  reducer: addHandler
})

store.dispatch(add());

Comparing Redux DevTools Extension:

• React: You have to add a predefined statement while creating the store to access the Redux DevTools.
• Redux Toolkit: It provides automatic support for Redux DevTools Extension.

 // Redux
 const store = createStore(
   reducer,   window.__REDUX_DEVTOOLS_EXTENSION__ && 
              window.__REDUX_DEVTOOLS_EXTENSION__()
 );

 // Reduc Toolkit
 const store = configureStore(
   reducer:rootReducer );

Comparing modification of states:

• Redux: We need to manually handle and change the state immutably.
• Redux Toolkit: It provides the support for immer.js library which automatically changes the code immutably.

// Redux
const initialState={
counter:0}

const handler=(state=initialState,action){
return{
    ...state,
    counter:state.counter+1;
    }    
}

// Redux Toolkit
const initialState={
counter:0}

const handler=(state=initialState,action){
return{
    counter:state.counter+1;
    }    
}

Conclusion:

• Redux Toolkit is beneficial to all Redux users regardless of skill level. It can be added as an internal part of the project at the start or can be added during the internal up-gradation in the existing one. 
• But it is still preferred that you should have the basic knowledge of how to handle and change the state immutably and also should have a glimpse of what is happening under the hood before migrating from Redux to Redux Toolkit.

rbbansal

Follow

Improve

Article Tags :

• Web Technologies
• ReactJS
• React-Redux
• React-Questions
• Redux-Toolkit

+1 More