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

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;

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;

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')
);

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;

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;

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:

• Redux Toolkit Documentation: The official documentation provides comprehensive guides and API references.
  • Redux Toolkit Documentation
• React Redux Documentation: Learn more about how to use Redux with React.
  • React Redux Documentation
• Redux Essentials Tutorial: A step-by-step tutorial to get you up and running with Redux Toolkit.
  • Redux Essentials Tutorial
• Redux Fundamentals Tutorial: A detailed tutorial covering the core concepts of Redux.
  • Redux Fundamentals Tutorial

Thanks for reading!
Po.