redux toolkit

Mnabawy — Wed, 23 Mar 2022 20:04:57 +0000

in this post we will know how usefull redux toolkit is and what it prings to the table

-first lets configure redux store for the counter app the old way
-then lets fire some actions
-then i will write the same code with the toolkit

here is my redux setup with the old way


import { createStore } from "redux";

const initialState = {
  counter: 0,
};

// actions
export const INCREMENT = "INCREMENT";
export const DECREMENT = "DECREMENT";
export const RESET = "RESET";

// counter reducer
const counterReducer = (state = initialState, action) => {
  if (action.type === INCREMENT) {
    return {
      counter: state.counter + 1,
    };
  }
  if (action.type === DECREMENT) {
    return {
      counter: state.counter - 1,
    };
  }
  if (action.type === RESET) {
    return {
      counter: 0,
    };
  }

  return state;
};

// ccounter store
const store = createStore(counterReducer);
export default store;

//here we fire diffrent actions 
// increment
dispatch({type: INCREMENT})

// decrement
dispatch({type: DECREMENT})

// reset
dispatch({type: RESET})

and here is the same approach with redux toolkit


import { configureStore, createSlice } from "@reduxjs/toolkit";
// initial state
const initialState = {
  counter: 0,
};

const counterSlice = createSlice({
  name: "counter",
  initialState: initialState,
  // here we replaced the reducer with this helper function which gives us ability to mutate the state directly 
  reducers: {
    increment(state) {
      state.counter++;
    },
    decrement(state) {
      state.counter--;
    },
    reset(state) {
      state.counter = 0;
    },
    increase(state) {
      state.counter = state.counter + action.payload;
    },
  },
});

// actions to be used from inside the component later to make changes to our state 
export const counterActions = counterSlice.actions;

const store = configureStore({
  reducer: counterSlice.reducer,
});

export default store;

//increment
counterActions.increment()

//decrement
counterActions.decrement()

//reset
counterActions.reset()

// and if you asking of course you can pass data (payload) 
like this 

for example as a parameter becase we still have access to the action payload
counterActions.increase(5)

quik recap what we has accomplished so far
-we made a simple counter with react and redux with two ways
-the first way we used the old way of redux and it's a little confusing and complex to configure at first
-so here comes redux toolkit to solve this problm
-the mean reason for using toolkit is to simplify redux configuration
-here i am not talking about the pros and cons of using both methods a i prefered to just explain the diffrent in a practical way

hope you enjoy it
;)

DEV Community: Mnabawy

redux toolkit