Kursinhalt
Redux Toolkit & React
Redux Toolkit & React
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
Öffnen Sie die Datei
store.js
, die sich im Ordnerredux
befindet.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.Ändern Sie im
index.js
-File den Code, um den erstellten Store in die gesamte App zu integrieren.Importieren Sie die Komponente
Provider
aus dem Paketreact-redux
.Umwickeln Sie die
App
-Komponente mit derProvider
-Komponente. Dadurch wird der Redux-Store allen Komponenten innerhalb der App zur Verfügung gestellt.Übergeben Sie die
store
-Eigenschaft an dieProvider
-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.
Die Funktion
configureStore
vereinfacht den Prozess der Erstellung eines Redux-Stores, indem sie sinnvolle Standardwerte und integrierte Middleware bereitstellt.Die
Provider
-Komponente aus demreact-redux
-Paket wird verwendet, um den Redux-Store für Komponenten verfügbar zu machen.Stellen Sie sicher, dass die
Provider
-Komponente die Hauptkomponente der App (typischerweise dieApp
-Komponente) umschließt.
Danke für Ihr Feedback!