Übung

Sobald der Store konfiguriert ist, kann er in der App verwendet werden. Der store muss der gesamten App bereitgestellt 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, die sich im Ordner redux befindet;
• Zeile 9-13: Der Provider-Komponente umschließt die App-Komponente. Der Provider 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 den Provider übergeben. Dieses Prop heißt store und sein Wert ist das importierte store-Objekt.