What is Redux Toolkit and why it is more preferred? - GeeksforGeeks

27 Oct, 2020
While working as a Front-end Developer or Full Stack Developer, many engineers encountered Redux. But Recently Redux Team launched Redux Toolkit, an officially recommended and a 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 was mainly created to solve the THREE MAJOR ISSUES with 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.
It also provides the 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 that comes along with Redux Toolkit:
immer
redux
redux-thunk
reselect
Install:
# NPM
npm install @reduxjs/toolkit

# Yarn
yarn add @reduxjs/toolkit
What Extra Features Are Provided:
A configureStore() function which provides automatic support for Redux-thunk, Redux DevTools Extension, and also passes the default middleware.
A createReducer() utility which provides support for immer library that allows writing the immutable code mutably.
A createAction() utility that returns an action creator function.
A createSlice() function that comes in handy to replace create action and create Reducer functions with a single function.
A createAsyncThunk() that takes Redux strings as arguments and returns a Promise.
A createEntityAdapter() utility that helps to perform CRUD operations.
A Basic Comparison Between Redux and Redux Toolkit(with React):
Redux: Creating Store and reducers.JavascriptJavascriptconst addHandler=(state=0,action)=>{if(action.type==='ADD'){    return state+1;}return state;}  const store = createStore(addHandler);  store.dispatch({type:'ADD'});Redux Toolkit: Creating Store and reducers.JavascriptJavascript// Action Creatorsconst add = createAction('ADD');   const addHandler = createReducer(0, {    [add]: state => state + 1})  const store = configureStore({  reducer: addHandler})  store.dispatch(add());
Redux: Creating Store and reducers.JavascriptJavascriptconst addHandler=(state=0,action)=>{if(action.type==='ADD'){    return state+1;}return state;}  const store = createStore(addHandler);  store.dispatch({type:'ADD'});
Redux: Creating Store and reducers.
Javascript
const addHandler=(state=0,action)=>{if(action.type==='ADD'){    return state+1;}return state;}  const store = createStore(addHandler);  store.dispatch({type:'ADD'});
Redux Toolkit: Creating Store and reducers.JavascriptJavascript// Action Creatorsconst add = createAction('ADD');   const addHandler = createReducer(0, {    [add]: state => state + 1})  const store = configureStore({  reducer: addHandler})  store.dispatch(add());
Redux Toolkit: Creating Store and reducers.
Javascript
// Action Creatorsconst add = createAction('ADD');   const addHandler = createReducer(0, {    [add]: state => state + 1})  const store = configureStore({  reducer: addHandler})  store.dispatch(add());
Using Redux DevTools Extension:
React: You have to add a predefined statement while creating the store to access the Redux DevTools.JavascriptJavascriptconst store = createStore(  reducer,   window.__REDUX_DEVTOOLS_EXTENSION__ &&              window.__REDUX_DEVTOOLS_EXTENSION__());Redux Toolkit: It provides automatic support for Redux DevTools Extension.JavascriptJavascriptconst store = configureStore(  reducer:rootReducer );
React: You have to add a predefined statement while creating the store to access the Redux DevTools.JavascriptJavascriptconst store = createStore(  reducer,   window.__REDUX_DEVTOOLS_EXTENSION__ &&              window.__REDUX_DEVTOOLS_EXTENSION__());
React: You have to add a predefined statement while creating the store to access the Redux DevTools.
Javascript
const store = createStore(  reducer,   window.__REDUX_DEVTOOLS_EXTENSION__ &&              window.__REDUX_DEVTOOLS_EXTENSION__());
Redux Toolkit: It provides automatic support for Redux DevTools Extension.JavascriptJavascriptconst store = configureStore(  reducer:rootReducer );
Redux Toolkit: It provides automatic support for Redux DevTools Extension.
Javascript
const store = configureStore(  reducer:rootReducer );
Modifying The State:
Redux: We need to manually handle and change the state immutably.JavascriptJavascriptconst initialState={counter:0}  const handler=(state=initialState,action){return{    ...state,    counter:state.counter+1;    }    }Redux Toolkit: It provides the support for immer.js library which automatically changes the code immutably.JavascriptJavascriptconst initialState={counter:0}  const handler=(state=initialState,action){return{    counter:state.counter+1;    }    }
Redux: We need to manually handle and change the state immutably.JavascriptJavascriptconst initialState={counter:0}  const handler=(state=initialState,action){return{    ...state,    counter:state.counter+1;    }    }
Redux: We need to manually handle and change the state immutably.
Javascript
const initialState={counter:0}  const handler=(state=initialState,action){return{    ...state,    counter:state.counter+1;    }    }
Redux Toolkit: It provides the support for immer.js library which automatically changes the code immutably.JavascriptJavascriptconst initialState={counter:0}  const handler=(state=initialState,action){return{    counter:state.counter+1;    }    }
Redux Toolkit: It provides the support for immer.js library which automatically changes the code immutably.
Javascript
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.
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.
react-js
Redux
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Difference Between PUT and PATCH Request
REST API (Introduction)
How to execute PHP code using command line ?
HTML Cheat Sheet - A Basic Guide to HTML
How to redirect to another page in ReactJS ?