Contenu du cours
Redux Toolkit & React
Redux Toolkit & React
2. Redux Toolkit en Pratique
Ce Qui Vous AttendCode Initial du Projet et Structure des FichiersCréation du Store ReduxIntégration du Store Redux dans l'ApplicationInspection du Store dans l'ApplicationActions et Créateurs d'ActionsRôle des RéducteursInspection des Actions et des RéducteursConnexion de Redux et ReactCompléter le Code de l'Application
Défi : Configuration du Store
Étape 1
Concentrez-vous sur la configuration du magasin Redux et son intégration dans l'ensemble de l'application. Le magasin Redux sert de lieu central pour stocker l'état de l'application, et le connecter à l'application permet aux composants d'accéder à l'état et de dispatcher des actions.
Exemple
Défi
- Ouvrez le fichier
store.js
situé dans le dossierredux
. - Utilisez la fonction
configureStore
du package@reduxjs/toolkit
pour créer le store Redux. Cette fonction offre une approche simplifiée pour configurer le store, avec des valeurs par défaut sensées et un middleware intégré. - Dans le fichier
index.js
, modifiez le code pour intégrer le store créé dans l'ensemble de l'application. - Importez le composant
Provider
du packagereact-redux
. - Enveloppez le composant
App
avec le composantProvider
. Cela rend le store Redux disponible pour tous les composants de l'application. - Passez la prop
store
au composantProvider
. Cela connecte l'application au store Redux créé, permettant aux composants d'accéder à l'état du store et de dispatcher des actions.
- La fonction
configureStore
simplifie le processus de création d'un magasin Redux en fournissant des valeurs par défaut sensées et un middleware intégré. - Le composant
Provider
du packagereact-redux
est utilisé pour rendre le magasin Redux disponible aux composants. - Assurez-vous que le composant
Provider
enveloppe le composant racine de l'application (généralement le composantApp
).
Tout était clair ?
Merci pour vos commentaires !
Section 3. Chapitre 3