Installation und Konfiguration von Redux Toolkit

Um Redux Toolkit zu verwenden, müssen Sie es zusammen mit den React-Bindings installieren.

Führen Sie den folgenden Befehl in Ihrem Projekt aus:

npm install @reduxjs/toolkit react-redux

Damit werden alle notwendigen Pakete installiert, um einen Store zu erstellen und ihn mit Ihrer React-Anwendung zu verbinden.

Store einrichten

Erstellen Sie eine neue Datei für den Store. Ein üblicher Speicherort ist:

src/store/store.js

In dieser Datei erstellen Sie den Store mit configureStore:

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

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

Zu diesem Zeitpunkt ist der Store leer. Sie fügen in den nächsten Kapiteln Reducer hinzu.

Redux mit React verbinden

Um den Store in Ihrer Anwendung verfügbar zu machen, umschließen Sie Ihre Root-Komponente mit Provider.

Öffnen Sie Ihre Haupteinstiegsdatei (zum Beispiel main.jsx oder index.js) und aktualisieren Sie sie wie folgt:

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

Nun ist der Redux Store in jeder Komponente verfügbar.