Abimanyu P

Posted on Oct 28

Redux Toolkit in React

#webdev #javascript #programming #react

What Is Redux Toolkit?

Redux Toolkit (RTK) is a library used to manage global state in React applications. It is the official, recommended way to write Redux logic.

In React, we use useState to manage data inside a component. But when multiple components need the same data, sharing and updating that data can become difficult.

For example, in an e-commerce application, the Navbar displays the cart count, and the Cart component displays the cart items. Both components need access to the same data.

Redux Toolkit solves this problem by storing shared data in one central place called the Redux Store.

Important Concepts

Store: Stores the application's global state.
Slice: Contains a piece of state and the functions used to update it.
Reducer: Defines how the state changes.
useSelector: Reads data from the Redux Store.
useDispatch: Dispatches actions to update the state.

How to Use Redux Toolkit

First, install Redux Toolkit and React Redux:

npm install @reduxjs/toolkit react-redux

1. Create a Slice

Create a file named counterSlice.js.

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

const counterSlice = createSlice({
  name: "counter",

  initialState: {
    count: 0,
  },

  reducers: {
    increment: (state) => {
      state.count += 1;
    },
  },
});

export const { increment } = counterSlice.actions;

export default counterSlice.reducer;

Here, createSlice() creates a slice with an initial state and a reducer.

When the increment action is dispatched, the count increases by one.

2. Create the Store

Create a file named store.js.

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./counterSlice";

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

The configureStore() function creates the Redux Store and registers the counter reducer.

3. Connect Redux to React

In main.jsx, wrap the application with Provider.

import { Provider } from "react-redux";
import { store } from "./store";
import App from "./App";

<Provider store={store}>
  <App />
</Provider>

The Provider makes the Redux Store accessible to the components inside it. Include this wrapper in your existing React rendering code.

4. Use Redux in a Component

In App.jsx:

import { useSelector, useDispatch } from "react-redux";
import { increment } from "./counterSlice";

function App() {
  const count = useSelector((state) => state.counter.count);

  const dispatch = useDispatch();

  return (
    <div>
      <h2>Count: {count}</h2>

      <button onClick={() => dispatch(increment())}>
        Increment
      </button>
    </div>
  );
}

export default App;

Here, useSelector() reads the count from the store, and useDispatch() allows us to dispatch an action.

When the button is clicked, the increment action is dispatched, the reducer updates the count, and React displays the new value.

Conclusion

Redux Toolkit makes global state management easier in React by providing a central store and a structured way to update shared data. It is especially useful in applications where multiple components need to access and update the same state.
For small applications, useState and useContext may be enough. For larger applications with complex shared state, Redux Toolkit can make state management easier to organize and maintain.

DEV Community