1
00:00:02,570 --> 00:00:08,780
L'état peut être complexe et il est important de comprendre cela pour comprendre quels problèmes les

2
00:00:08,780 --> 00:00:12,220
solutions de gestion d'état comme Redux résolvent réellement.

3
00:00:12,320 --> 00:00:17,930
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

4
00:00:17,930 --> 00:00:23,180
construisez où vous avez deux zones différentes, une où vous gérez vos utilisateurs, où les utilisateurs peuvent se connecter, où les utilisateurs

5
00:00:23,180 --> 00:00:28,100
peuvent gérer leur tableau de bord, voir leur tableau de bord et ainsi de suite et celui où vous avez

6
00:00:28,100 --> 00:00:30,100
des produits dans une liste que les

7
00:00:30,100 --> 00:00:35,480
utilisateurs peuvent ajouter à un panier, alors ces zones ne sont en fait pas totalement indépendantes mais dans votre application, elles seront

8
00:00:35,480 --> 00:00:38,290
affichées sur différents écrans, donc assez séparées de L'une et l'autre.

9
00:00:38,630 --> 00:00:44,630
Mais la question de savoir si un utilisateur est signé dans lequel vous avez besoin ici peut également être

10
00:00:44,630 --> 00:00:46,100
pertinente dans une autre

11
00:00:46,280 --> 00:00:52,550
partie de votre application et pour le moment, vous devez normalement transmettre ces données manuellement via des accessoires en les

12
00:00:52,550 --> 00:00:57,930
passant du composant A à B à C à D jusqu'à E où vous en aurez peut-être

13
00:00:57,970 --> 00:01:00,490
besoin, ce n'est pas vraiment très pratique.

14
00:01:00,500 --> 00:01:06,980
Au lieu de cela, vous voulez avoir une configuration d'application où quelque chose change, par exemple un utilisateur se connecte

15
00:01:06,980 --> 00:01:07,900
ou dans

16
00:01:07,910 --> 00:01:15,080
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

17
00:01:15,080 --> 00:01:19,420
et transmises automatiquement aux endroits là où vous en avez besoin, mais pas via

18
00:01:19,520 --> 00:01:26,120
des accessoires, mais avec un mécanisme en arrière-plan qui vous aide à ce sujet et c'est là que Redux est une

19
00:01:26,120 --> 00:01:31,370
solution courante que nous utilisons dans les applications React et React Native pour gérer cet état.

20
00:01:31,370 --> 00:01:33,170
Maintenant, comment fonctionne Redux?

21
00:01:33,200 --> 00:01:38,420
Tout d'abord, Redux est une bibliothèque tierce que vous pouvez ajouter à React Native pour

22
00:01:38,450 --> 00:01:45,050
l'utiliser et il s'agit d'avoir un magasin central. Redux introduit un magasin central en mémoire, pas une

23
00:01:45,110 --> 00:01:51,950
base de données mais il est en mémoire, dans la mémoire Javascript pour ainsi dire où l'état de votre application,

24
00:01:51,950 --> 00:01:58,070
de sorte que les données dont les différentes parties de votre application dépendent peuvent être stockées, puis lorsque

25
00:01:58,070 --> 00:01:59,280
dans un composant,

26
00:01:59,330 --> 00:02:03,740
vous avez quelque chose qui veut manipuler cet état, par exemple, nous mettons

27
00:02:03,770 --> 00:02:10,610
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,

28
00:02:10,610 --> 00:02:15,840
diriez-vous, ayant un certain schéma qui peut être géré par Redux comme vous l'avez configuré.

29
00:02:15,860 --> 00:02:20,800
Cette action atteint un soi-disant réducteur et vous serez celui qui rédigera ce réducteur en tant que

30
00:02:20,810 --> 00:02:25,270
développeur, afin que vous puissiez contrôler le type d'action qu'un réducteur accepte, de sorte que

31
00:02:26,060 --> 00:02:32,180
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é

32
00:02:32,480 --> 00:02:39,670
sur l'ancien état qui met ensuite à jour cet état stocké centralement. Le réducteur est donc là pour mettre à

33
00:02:39,660 --> 00:02:42,500
jour l'état à la fin.

34
00:02:42,500 --> 00:02:48,080
Et lorsque ce magasin change, lorsque l'état y change, vous pouvez également avoir des abonnements à ce magasin à

35
00:02:48,080 --> 00:02:53,050
partir d'autres composants, ces abonnements seront déclenchés lorsque votre magasin, lorsque votre état change et que l'état

36
00:02:53,090 --> 00:02:57,340
mis à jour est ensuite transmis aux emplacements dans votre application, donc pour les

37
00:02:57,380 --> 00:03:01,040
composants qui sont intéressés par ces changements, par exemple, ce composant pourrait

38
00:03:01,040 --> 00:03:05,720
être intéressé par certaines mises à jour, alors il peut configurer un abonnement et il sera

39
00:03:05,900 --> 00:03:08,190
informé de la mise à jour

40
00:03:08,190 --> 00:03:14,130
et obtiendra le nouvel état via son accessoires ou aussi avec des crochets React comme vous l'apprendrez dans ce module.

41
00:03:14,240 --> 00:03:19,620
C'est ainsi que Redux fonctionne et c'est l'idée derrière Redux.

42
00:03:19,700 --> 00:03:27,020
Maintenant, une note importante, si vous êtes un peu plus loin dans React, vous connaissez probablement aussi l'API

43
00:03:27,050 --> 00:03:29,770
de contexte React intégrée à React.

44
00:03:29,810 --> 00:03:36,980
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

45
00:03:36,980 --> 00:03:39,710
tous les cas d'utilisation où vous utilisez Redux.

46
00:03:39,710 --> 00:03:45,160
Je ne m'étendrai pas plus en détail ici car ce n'est pas vraiment un cours sur les entrées et les

47
00:03:45,170 --> 00:03:50,930
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

48
00:03:50,930 --> 00:03:58,030
cette comparaison entre React Context API et Redux et quand les utiliser. Dans ce module, nous utiliserons Redux qui est très flexible, que

49
00:03:58,050 --> 00:04:02,490
nous pouvons certainement utiliser et je vais vous montrer comment le configurer avec React

50
00:04:02,490 --> 00:04:05,870
Native et comment vous pouvez alors bien sûr travailler avec.