Kursinhalt
Redux Toolkit & React
Redux Toolkit & React
2. Redux Toolkit in der Praxis
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.
War alles klar?
Danke für Ihr Feedback!
Abschnitt 3. Kapitel 3