Redux Toolkit

Posted on In

Redux Toolkit is a package that simplifies the process of managing state in a React application using Redux.

Redux Toolkit

Here’s a simple example of how you can use Redux Toolkit to manage a counter in a React app:

Install

First, make sure you have Redux Toolkit installed. If not, you can install it using npm or yarn:

1
npm install @reduxjs/toolkit react-redux

Create Redux Store

create a file src/app/store.js. use configureStore to create an empty Redux store.

1
2
3
4
5
6
// app/store.js
import { configureStore } from '@reduxjs/toolkit'

export const store = configureStore({
  reducer: {},
})

Add Redux Store to React

Now, we can add this store to our React app. In index.js. Add <Provider> to the root component of your app and pass the store as a prop.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// index.js
import { createRoot } from "react-dom/client";
import { store } from "./app/store";
import { Provider } from "react-redux";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <Provider store={store}>
    <App />
  </Provider>
)

Create Redux Slice

Now, let’s create a Redux slice using Redux Toolkit. Create a file called counterSlice.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  value: 0
};

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

// Action creators are generated for each case reducer function
export const { increment, decrement, incrementByAmount } = counterSlice.actions;

export default counterSlice.reducer;

In this example, we define a slice of the Redux store called counter. It has an initial state of {value: 0} and reducer functions: increment, decrement and incrementByAmount.

incrementByAmount takes a payload as an argument and increments the state by that amount.

Export action creators from the slice. These are functions that dispatch actions to the reducer. We can use these functions in our React components to update the state.

Add Slice to Redux Store

Now we can add the reducers we defined from slice to the Redux store. In store.js:

1
2
3
4
5
6
7
8
9
10
11
// app/store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

Use Redux Store In React Component

Now, you can use this store in your React component. For example, in Counter.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// Counter.js
import React, { useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { decrement, increment, incrementByAmount } from "./counterSlice";

export function Counter() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();
  const [incrementAmount, setIncrementAmount] = useState("2");

  function handleIncrement() {
    dispatch(increment());
  }

  function handleDecrement() {
    dispatch(decrement());
  }

  function handleIncrementAmount() {
    dispatch(incrementByAmount(Number(incrementAmount) || 0));
  }
  return (
    <div>
      <div>
        <span>{count}</span>
        <div>
          <button onClick={handleIncrement}>Increment</button>
          <button onClick={handleDecrement}>Decrement</button>
        </div>
        <div>
          <input
            value={incrementAmount}
            onChange={(e) => setIncrementAmount(e.target.value)}
          />
          <button onClick={handleIncrementAmount}>Add Amount</button>
        </div>
      </div>
    </div>
  );
}

In this component, we use the useSelector hook to access the state from the Redux store 

1
2
// getting state value from Redux store using useSelector hook
const count = useSelector((state) => state.counter.value);

We use the useDispatch hook to get the dispatch function. When the “Increment” or “Decrement” buttons are clicked, the corresponding actions are dispatched, updating the state through the reducer defined in the counterSlice.js file.

1
2
3
4
5
6
7
8
9
10
11
// import the actions from slice
import { decrement, increment, incrementByAmount } from "./counterSlice";

// get dispatch hook
const dispatch = useDispatch();

// dispatch action
dispatch(increment());

// dispatch action with payload
dispatch(incrementByAmount(Number(incrementAmount) || 0));

Full Exaple:

Resources