Installing and Configuring Redux Toolkit

To start using Redux Toolkit, you need to install it along with the React bindings.

Run the following command in your project:

npm install @reduxjs/toolkit react-redux

This installs everything you need to create a store and connect it to your React app.

Setting Up the Store

Create a new file for the store. A common location is:

src/store/store.js

Inside this file, you create the store using configureStore:

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

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

At this point, the store is empty. You will add reducers to it in the next chapters.

Connecting Redux to React

To make the store available in your app, wrap your root component with Provider.

Open your main entry file (for example main.jsx or index.js) and update it like this:

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

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

Now the Redux store is available in every component.