Simple Redux Toolkit Example

Redux tool kit is a good approach for the traditional redux implementation. we can archive the state management with less amount of code. In redux toolkit we do not need to create separate types and other actions.

Let’s start our application 🙂

First create the store file like this

import { configureStore } from '@reduxjs/toolkit';
import calcReducer from '../slices/calcSlice';

export const store = configureStore({
  reducer: {
    calc: calcReducer
  }
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

Then we have to wrap our app inside the redux provider, we can provide above store into the provider.

import React from 'react';
import { Provider } from 'react-redux';
import { store } from './redux/store';
import CalcPage from './containers/CalcPage';

const App = () => {
  return (
    <Provider store={store}>
      <CalcPage />
    </Provider>
  );
};

export default App;

In redux toolkit, “slice” will full fill our types, actions and reducers requirements. This is our calc slice.

import { createSlice, PayloadAction } from '@reduxjs/toolkit';

export interface CalcState {
  firstValue: number;
  secondValue: number;
  total?: number;
}

export const initialState: CalcState = {
  firstValue: 0,
  secondValue: 0,
  total: 0
};

export const calcSlice = createSlice({
  name: 'calc',
  initialState,
  reducers: {
    addition: (state, action: PayloadAction<CalcState>) => {
      state.total = action.payload.firstValue + action.payload.secondValue;
    },
    subtraction: (state, action: PayloadAction<CalcState>) => {
      state.total = action.payload.firstValue - action.payload.secondValue;
    },
    multiplication: (state, action: PayloadAction<CalcState>) => {
      state.total = action.payload.firstValue * action.payload.secondValue;
    },
    division: (state, action: PayloadAction<CalcState>) => {
      state.total = action.payload.firstValue / action.payload.secondValue;
    }
  }
});

export const {
  addition,
  division,
  multiplication,
  subtraction
} = calcSlice.actions;

export default calcSlice.reducer;

Now we can integrate all together. this is how we use actions and state in our components.

import React, { useEffect, useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { RootState } from '../redux/store';
import {
  addition,
  division,
  multiplication,
  subtraction
} from '../slices/calcSlice';

const CalcPage = () => {
  const [firstValue, setFirstValue] = useState(0);
  const [secondValue, setSecondValue] = useState(0);
  const calcValues = useSelector((state: RootState) => state.calc);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Redux Toolkit</h1>
      First Value :{' '}
      <input
        onChange={event => setFirstValue(Number(event.target.value))}
        type="number"
      />
      <br />
      <br />
      Second Value :{' '}
      <input
        onChange={event => setSecondValue(Number(event.target.value))}
        type="number"
      />
      <br />
      <br />
      <button onClick={() => dispatch(addition({ firstValue, secondValue }))}>
        Addition
      </button>
      <button onClick={() => dispatch(division({ firstValue, secondValue }))}>
        Division
      </button>
      <button
        onClick={() => dispatch(multiplication({ firstValue, secondValue }))}
      >
        Multiplication
      </button>
      <button
        onClick={() => dispatch(subtraction({ firstValue, secondValue }))}
      >
        Subtraction
      </button>
      <h3>Result : {calcValues.total}</h3>
    </div>
  );
};

export default CalcPage;

All done 🙂

Here I have attached a simple project for understanding the basic concept of the redux toolkit.

If you are new to redux toolkit try to use this on your next project. In next article I’ll explain how to use sync calls using redux toolkit.

happy code !!