L'état peut être complexe et il est important de comprendre cela pour comprendre quels problèmes les
solutions de gestion d'état comme Redux résolvent réellement.
Si nous avions une application comme celle-ci, qui n'est pas l'application que nous avons construite, mais qui pourrait être une application que vous
construisez où vous avez deux zones différentes, une où vous gérez vos utilisateurs, où les utilisateurs peuvent se connecter, où les utilisateurs
peuvent gérer leur tableau de bord, voir leur tableau de bord et ainsi de suite et celui où vous avez
des produits dans une liste que les
utilisateurs peuvent ajouter à un panier, alors ces zones ne sont en fait pas totalement indépendantes mais dans votre application, elles seront
affichées sur différents écrans, donc assez séparées de L'une et l'autre.
Mais la question de savoir si un utilisateur est signé dans lequel vous avez besoin ici peut également être
pertinente dans une autre
partie de votre application et pour le moment, vous devez normalement transmettre ces données manuellement via des accessoires en les
passant du composant A à B à C à D jusqu'à E où vous en aurez peut-être
besoin, ce n'est pas vraiment très pratique.
Au lieu de cela, vous voulez avoir une configuration d'application où quelque chose change, par exemple un utilisateur se connecte
ou dans
notre application de repas, vous définissez un certain filtre et vous l'enregistrez, puis ces informations sont en quelque sorte propagées à votre application
et transmises automatiquement aux endroits là où vous en avez besoin, mais pas via
des accessoires, mais avec un mécanisme en arrière-plan qui vous aide à ce sujet et c'est là que Redux est une
solution courante que nous utilisons dans les applications React et React Native pour gérer cet état.
Maintenant, comment fonctionne Redux?
Tout d'abord, Redux est une bibliothèque tierce que vous pouvez ajouter à React Native pour
l'utiliser et il s'agit d'avoir un magasin central. Redux introduit un magasin central en mémoire, pas une
base de données mais il est en mémoire, dans la mémoire Javascript pour ainsi dire où l'état de votre application,
de sorte que les données dont les différentes parties de votre application dépendent peuvent être stockées, puis lorsque
dans un composant,
vous avez quelque chose qui veut manipuler cet état, par exemple, nous mettons
un filtre ou nous marquons un repas comme favori, nous envoyons ensuite une soi-disant action, c'est un paquet d'informations prédéfini,
diriez-vous, ayant un certain schéma qui peut être géré par Redux comme vous l'avez configuré.
Cette action atteint un soi-disant réducteur et vous serez celui qui rédigera ce réducteur en tant que
développeur, afin que vous puissiez contrôler le type d'action qu'un réducteur accepte, de sorte que
le type de package d'informations requis par votre réducteur et que ce rédacteur reçoive ensuite l'action et dérive un nouvel état basé
sur l'ancien état qui met ensuite à jour cet état stocké centralement. Le réducteur est donc là pour mettre à
jour l'état à la fin.
Et lorsque ce magasin change, lorsque l'état y change, vous pouvez également avoir des abonnements à ce magasin à
partir d'autres composants, ces abonnements seront déclenchés lorsque votre magasin, lorsque votre état change et que l'état
mis à jour est ensuite transmis aux emplacements dans votre application, donc pour les
composants qui sont intéressés par ces changements, par exemple, ce composant pourrait
être intéressé par certaines mises à jour, alors il peut configurer un abonnement et il sera
informé de la mise à jour
et obtiendra le nouvel état via son accessoires ou aussi avec des crochets React comme vous l'apprendrez dans ce module.
C'est ainsi que Redux fonctionne et c'est l'idée derrière Redux.
Maintenant, une note importante, si vous êtes un peu plus loin dans React, vous connaissez probablement aussi l'API
de contexte React intégrée à React.
Cela peut également être utilisé pour certains états et la gestion des données en coulisses, mais ce n'est pas un bon remplacement pour
tous les cas d'utilisation où vous utilisez Redux.
Je ne m'étendrai pas plus en détail ici car ce n'est pas vraiment un cours sur les entrées et les
sorties de différentes constructions React, nous voulons plutôt apprendre React Native ici, mais ci-joint, vous trouverez quelques ressources qui vous aideront dans
cette comparaison entre React Context API et Redux et quand les utiliser. Dans ce module, nous utiliserons Redux qui est très flexible, que
nous pouvons certainement utiliser et je vais vous montrer comment le configurer avec React
Native et comment vous pouvez alors bien sûr travailler avec.