DEV Community

Cover image for Using Redux Toolkit with React: A Simple Guide
PO
PO

Posted on

Using Redux Toolkit with React: A Simple Guide

Redux Toolkit is the official, recommended way to write Redux logic. It provides good defaults for store setup out of the box, and includes the most commonly used Redux addons built-in. In this blog, we'll walk through the basics of integrating Redux Toolkit with a React application.

What is Redux Toolkit?

Redux Toolkit is a set of tools that helps simplify the process of writing Redux logic. It includes utilities to simplify common use cases like store setup, creating reducers, and writing immutable update logic.


Setting Up Redux Toolkit with React

Let's go through the steps to set up Redux Toolkit in a React application.

Step 1: Install Dependencies

First, you need to install the necessary packages. You can do this using npm or yarn.

npm install @reduxjs/toolkit react-redux
Enter fullscreen mode Exit fullscreen mode

Step 2: Create a Redux Store

The store is the object that brings Redux to life. With Redux Toolkit, you can create a store using the configureStore function.

// src/store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './features/counter/counterSlice';

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

export default store;
Enter fullscreen mode Exit fullscreen mode

Step 3: Create a Slice

A slice is a collection of Redux reducer logic and actions for a single feature of your app. Redux Toolkit's createSlice function generates action creators and action types automatically.

// src/features/counter/counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
  },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
  },
});

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

export default counterSlice.reducer;
Enter fullscreen mode Exit fullscreen mode

Step 4: Provide the Store to Your React Application

To make the Redux store available to your React components, you need to use the Provider component from react-redux.

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

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

Step 5: Connect React Components to the Redux Store

To connect a React component to the Redux store, you can use the useSelector and useDispatch hooks from react-redux.

// src/components/Counter.jsx
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from '../features/counter/counterSlice';

function Counter() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
}

export default Counter;
Enter fullscreen mode Exit fullscreen mode

Step 6: Use the Connected Component in Your App

Finally, you can use the connected component in your application.

// src/App.js
import Counter from './components/Counter';

function App() {
  return (
    <div>
      <Counter />
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Conclusion

By following these steps, you can set up Redux Toolkit in your React application to manage state in a predictable and maintainable way. Redux Toolkit simplifies many of the common tasks when working with Redux, making it easier to write and maintain your Redux logic.


Further Exploration

For those who want to dive deeper into Redux Toolkit and React, here are some valuable resources:

Thanks for reading!
Po.

Top comments (0)