Redux Toolkit

From this article I am going to explain you how to implement redux-toolkit for your next project. As redux make it hard to manage when codebase is rising, redux toolkit can be a good way to manage your state in react project. And it is super easy when compare to redux.

First install the redux-toolkit and react-redux.

npm i @reduxjs/toolkit react-redux

For this I use simple counter example. First we can create the slice for our counter.

First I create a store folder inside my app. In there I create an index.js file.

When we creating a slice we have to give it a name and initialState. Then we can define our reducers like in below code.

import { createSlice } from "@reduxjs/toolkit";
const initialState = { count: 0 };
const slice = createSlice({
  name: "counter",
  initialState,
  reducers: {
     increase(state) {
       state.count++;
},
     decreaseByFive(state, action) {
       state.count = state.count - action.payload;
},},
});
export default slice;

Just like above code inside reducers we can create functions to do certain tasks. From these reduces we can access state and actions. Actions get values from payload what we send when we dispatch. We can look it later in the code.

It make our work easy when it compare to normal redux.

Then we can look how we configure our store and how can we export store and those reducers.

import { configureStore } from "@reduxjs/toolkit";
const store = configureStore({
  reducer: { counter: counterSlice.reducer },
});
export default store;
export const counterAction = slice.actions;
// for typescript
type RootState = ReturnType<typeof store.getState>;
export const counterPayload = (state: RootState) => ({
     count: state.counter.count,
});

Just like normal redux import provider from react-redux and add the store.

From this counterAction we can call for those reducer that we reacted in our slice and manipulate the state. To call the reducer I create a counter.js file like below. We can access our count state like below in useSelecter and dispatch values like below.

Below code for javascript.

import {counter} from './store'
import {useSelector, useDispatch} from 'react-redux'
const Counter = () => {
  const count = useSelector(state => state.counter.count)
  const dispatch = useDispatch()
  const increaseHandler = ()=>{
      dispatch(counter.increase())
}
  const decreaseHandler = ()=>{
     dispatch(counter.decreaseByFive(5))
}
return (
   <div>
     {count}
     <button onClick={increaseHandler}> Increase </button>
     <button onClick={decreaseHandler}> Decrease By 5 </button>
  </div>
)}
export default Counter

This is for typescript.

import {counterAction, counterPayload} from '../store/counter';
import {useSelector, useDispatch } from 'react-redux'
const Counter = () => {
   const {count} = useSelector(counterPayload)
   const dispatch = useDispatch()
   
   const increaseHandler = ()=>{
     dispatch(counterAction.increase())
}
   const decreaseHandler = ()=>{
      dispatch(counterAction.decreaseByFive(5))
}
return (
  <div>
    {count}
    <button onClick={increaseHandler}> Increase </button>
    <button onClick={decreaseHandler}> Decrease By 5 </button>
  </div>
)}
export default Counter

Just like that we can simply make our store from redux-toolkit. Thanks for reading.