Redux Toolkit

First thoughts, not as simple as MobX, but far, far better than using Redux.

Yes, Redux Toolkit is much simpler to use than Redux, it overcomes the common issues of using Redux such as.

Configuring the redux store is much complicated and often leads to errors.

You need to use a lot of add-on libraries to make redux work in react.

Tons of boiler code. Seriously tons and tons of boiler code.

Redux Toolkit is a better way of writing code, it makes your store more readable and your life easier.

Redux was considered as a standard way of store management for a long time and it did make lives for many beginners in React miserable, including mine. But then came MobX for rescue and the world seemed a better place to live in. Now Redux Toolkit seems another good option.

Below are the steps to configure the store in Redux Toolkit and how to use it in the component.

Step 1: Create a store and pass it as a prop in Provider.

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import store from './redux/store';
import { Provider } from 'react-redux';

import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Step 2: The store collects all the reducers in one place.

To create a store you need to use the “configureStore()” function and register all the reducers.

// Store.js

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterReducer';
import userReducer from './userReducer';

export default configureStore({
  reducer: {
    counter: counterReducer,
    user: userReducer
  },
});

Step 3: The reducer does state manipulation and exports the action and state for components to access.

The createSlice() function is the heart of Redux Toolkit that maintains the state and the reducer functions. It accepts name, initial state, and reducers as parameters.

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

const initialState = {
  count: 0,
};

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.count += 1;
    },
    decrement: (state) => {
      state.count -= 1;
    },
    incrementByAmount: (state, action) => {
      state.count += action.payload;
    },
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;

export const selectCount = (state) => state.counter.count;

export default counterSlice.reducer;

Step 4: The component simply imports the state, action from the reducer. The component then dispatches actions upon user action.

useSelector() hook is used to observe the state in the store. In our case, we are observing the count state in the store using this hook.

useDispatch() hook is used to simply dispatch the action that triggers the reducers in the store which then manipulates the state.

import React from 'react';
import './style.css';
import { useSelector, useDispatch } from 'react-redux';
import {
  decrement,
  increment,
  incrementByAmount,
  selectCount,
} from './redux/counterReducer';
import './style.css';

export default function App() {
  
  const count = useSelector(selectCount);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Count : {count}</h1>
      <button
        onClick={() => {
          dispatch(increment());
        }}
      >
        increment
      </button>
      <button
        onClick={() => {
          dispatch(decrement());
        }}
      >
        decrement
      </button>
      <button onClick={() => dispatch(incrementByAmount(Number(10) || 0))}>
        increment by 10
      </button>
    </div>
  );
}

Redux Toolkit is as simple as Redux can get! Hope this post gave you a better picture of Redux Toolkit.

The working code of this example could be found at my stackblitz profile!

As always happy coding!