Configurer le magasin Redux et le Provider

Redux Toolkit (RTK) est aujourd’hui la méthode officielle et recommandée pour écrire la logique Redux. Il élimine le code répétitif de Redux classique en fournissant des fonctions utilitaires comme configureStore, createSlice et createAsyncThunk. RTK applique par défaut les bonnes pratiques, notamment l’utilisation d’Immer pour les mises à jour immuables et l’intégration de Redux DevTools.

Pour commencer à utiliser Redux Toolkit avec React Native, vous avez besoin de deux paquets : @reduxjs/toolkit fournit les utilitaires principaux et react-redux fournit les liaisons avec React. Installez-les avec une seule commande ; ils seront immédiatement prêts à l’emploi.

Le store est la source unique de vérité pour l’état de toute votre application Redux. Créez-le avec configureStore en transmettant un objet reducer qui associe les noms des slices à leurs fonctions de réduction. RTK configure automatiquement Redux DevTools et applique les intergiciels recommandés, comme redux-thunk.

Le composant fournisseur de react-redux rend le magasin Redux disponible pour chaque composant de votre arborescence de composants React Native. Entourez votre composant racine (ou NavigationContainer si vous utilisez React Navigation) avec <Provider store={store}>. Tout composant situé dans l’arborescence peut ensuite accéder au magasin à l’aide de crochets.

Redux impose un flux de données unidirectionnel strict : l’interface utilisateur distribue une action, le réducteur traite cette action pour produire un nouvel état, le magasin enregistre ce nouvel état, puis l’interface utilisateur est réaffichée pour refléter la modification. Ce cycle prévisible facilite le débogage et les tests, car chaque changement d’état peut être attribué à une action précise.

Dans les projets TypeScript, il est recommandé de créer des versions typées de useDispatch et useSelector afin de bénéficier de la complétion automatique et de la sécurité de typage dans toute l’application. Exportez useAppDispatch et useAppSelector depuis un fichier de crochets, puis importez-les dans vos composants à la place des crochets bruts.

La clé reducer à l’intérieur de configureStore accepte un objet dont chaque clé devient un nom de tranche dans l’état global. Par exemple, transmettre { counter: counterReducer, user: userReducer } signifie que la structure de votre état est { counter: {...}, user: {...} }. Vous pouvez ajouter d’autres tranches à tout moment sans modifier celles qui existent déjà.

configureStore active automatiquement l’extension de navigateur Redux DevTools en mode développement. Avec DevTools, vous pouvez inspecter l’état actuel, consulter chaque action distribuée et même revenir dans le temps à un instantané d’état précédent. Il s’agit de l’un des principaux avantages de Redux pour le débogage par rapport à un simple useState.

Le configureStore de RTK ajoute plusieurs intergiciels par défaut : redux-thunk pour les créateurs d’actions asynchrones, un intergiciel de serializability check qui avertit lorsque des valeurs non sérialisables (comme des fonctions ou des instances de classe) sont placées dans l’état, ainsi qu’une immutability check qui avertit si l’état est modifié directement. Vous pouvez personnaliser cela avec l’option middleware.

Une structure de dossiers claire facilite la maintenance des applications Redux. Une organisation courante consiste à utiliser un dossier store/ contenant un fichier index.ts pour la configuration du magasin et un sous-dossier features/ où chaque fonctionnalité possède son propre fichier de tranche. Par exemple : store/features/counter/counterSlice.ts. Gardez les fichiers de tranche courts et centrés sur un seul concept métier.

Après avoir configuré le Provider, une vérification rapide consiste à consigner store.getState() dans le fichier du magasin. Cela affiche l’état initial dans la console et confirme que la carte des réducteurs est correctement structurée. Lorsque vous voyez la structure attendue — par exemple { counter: { value: 0 } } — vous savez que le magasin est prêt à être lu et modifié par les composants.

Dans cette leçon, vous avez appris que Redux Toolkit réduit le code répétitif grâce à configureStore et aux intergiciels intégrés, que le composant Provider rend le magasin accessible à toute l’arborescence des composants et que les crochets typés (useAppDispatch, useAppSelector) ajoutent la sécurité de TypeScript à votre code Redux. Nous allons maintenant découvrir la création de tranches avec createSlice.