DEV Community

Cover image for Redux vs Redux-Tool kit
Sankalpcreat
Sankalpcreat

Posted on

Redux vs Redux-Tool kit

As we know in recent time how react is growing popularity in Tech Industry.Today we will be discussing about redux and its tool kit how ,when,where to use and differences how redux-tool kit helps redux to enhance the Application.

What is Redux?

Redux is react popular state management library that handles state change thanks to Dan abramov for redux that makes our job easier and simpler to manage the state change.
Redux follow the Flux architecture and also follows centralized storage management.

Redux ToolKit

Redux toolkit is simplified package that helps the Redux flow.
Redux has lot of boilerplate code while writing Like define actions,writing the reducer.

Lets see the difference in code base when we use redux and when we use redux tool kit .Let take an example for counter using redux

Counter Using Redux

const Increment='Increment'
const Decrement='Decrement'

const increment= () =>({type:Increment })
const decrement = () =>({type:Decrement})

const counterReducer = (state=0,action) =>{
switch(action.type){
case Increment:
  return state+1;
case Decrement:
  return state-1;
default:
return state;}
);
const {createStore}=Redux;
const store=creatStore(counterReducer);

store.dispatch(increment());
console.log(store.getState());

store.dispatch(decrement());
console.log(store.getState());

Enter fullscreen mode Exit fullscreen mode

Counter Using Redux-ToolKit

import {createSlice,configureStore} from '@reduxjs/toolkit'
const counterSlice=createSlice({
name:'counter',
intialState:'0',
reducer:(
increment:(state)=>state+1,
decrement:(state)=>state-1,
},
});
const store=configureStore({reducer:counterSlice.reducer});
store.dispatch(counterSlice.action.increment());
console.log(store.getState());

store.dispatch(counterSlice.action.decrement());
console.log(store.getState());
Enter fullscreen mode Exit fullscreen mode

From the above notation code we can get to know the boilerplate code for redux when we have to initialize the state management but in redux toolkit we have in-build library of redux

Advantages of Redux-ToolKit

Reduce boilerplate code
Immutability Handling
Devtools Integration

When to use Redux

  1. Advance use cases- In case if you are using Middleware,custom enhancer,manual control.
  2. Existing Redux codebase- we can use redux if code base is already existing because shifting of codebase makes problematic.

Top comments (0)