Übung

Sobald der Store konfiguriert ist, kann er in der App verwendet werden. Der store muss der gesamten App zur Verfügung gestellt werden. Dies erfolgt in der Datei index.js.

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

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </Provider>
);

Code-Erklärung: Integration des Redux-Stores in eine React-App unter Verwendung der Bibliothek react-redux. Die einzelnen Schritte im Überblick:

• Zeile 3: Import des Provider-Komponenten aus der Bibliothek react-redux;
• Zeile 5: Import des store-Objekts aus einer Datei namens store.js im Ordner redux;
• Zeile 9-13: Die Provider-Komponente umschließt die App-Komponente. Die Provider-Komponente ist eine Higher-Order-Komponente von react-redux, die den Redux-Store für die Komponenten der App verfügbar macht;
• Zeile 9: Das store-Objekt wird als Prop an die Provider-Komponente übergeben. Dieses Prop heißt store und sein Wert ist das importierte store-Objekt.