Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Herausforderung: Einrichten des Stores | Redux Toolkit Herausforderungs-Workshop
Redux Toolkit & React
course content

Kursinhalt

Redux Toolkit & React

Redux Toolkit & React

1. Einführung in das Redux Toolkit
2. Redux Toolkit in der Praxis
3. Redux Toolkit Herausforderungs-Workshop

book
Herausforderung: Einrichten des Stores

Schritt 1

Konzentrieren Sie sich darauf, den Redux-Store einzurichten und in die gesamte App zu integrieren. Der Redux-Store dient als zentraler Ort zur Speicherung des Anwendungszustands, und die Verbindung mit der App ermöglicht es den Komponenten, auf den Zustand zuzugreifen und Aktionen zu senden.

Beispiel

Herausforderung

  1. Öffnen Sie die Datei store.js, die sich im Ordner redux befindet.
  2. Verwenden Sie die Funktion configureStore aus dem Paket @reduxjs/toolkit, um den Redux-Store zu erstellen. Diese Funktion bietet einen optimierten Ansatz zur Einrichtung des Stores mit sinnvollen Standardeinstellungen und integrierter Middleware.
  3. Ändern Sie im index.js-File den Code, um den erstellten Store in die gesamte App zu integrieren.
  4. Importieren Sie die Komponente Provider aus dem Paket react-redux.
  5. Umwickeln Sie die App-Komponente mit der Provider-Komponente. Dadurch wird der Redux-Store allen Komponenten innerhalb der App zur Verfügung gestellt.
  6. Übergeben Sie die store-Eigenschaft an die Provider-Komponente. Dies verbindet die App mit dem erstellten Redux-Store und ermöglicht es den Komponenten, auf den Zustand des Stores zuzugreifen und Aktionen zu versenden.
  1. Die Funktion configureStore vereinfacht den Prozess der Erstellung eines Redux-Stores, indem sie sinnvolle Standardwerte und integrierte Middleware bereitstellt.
  2. Die Provider-Komponente aus dem react-redux-Paket wird verwendet, um den Redux-Store für Komponenten verfügbar zu machen.
  3. Stellen Sie sicher, dass die Provider-Komponente die Hauptkomponente der App (typischerweise die App-Komponente) umschließt.

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 3
We're sorry to hear that something went wrong. What happened?
some-alt