1
00:00:02,360 --> 00:00:04,430
Comment pouvons-nous utiliser notre magasin?

2
00:00:04,430 --> 00:00:11,240
Eh bien, gardez à l'esprit qu'en fin de compte ici, je gère mes repas, pas mes catégories parce que nous n'avons aucune action prévue

3
00:00:11,240 --> 00:00:13,490
qui changerait quoi que ce soit là-bas, mais

4
00:00:13,670 --> 00:00:15,530
je gère mes repas ici.

5
00:00:15,650 --> 00:00:22,990
Donc, une grande tâche serait d'aller partout dans notre application où nous importons des repas à partir des données factices et de nous débarrasser de cette importation

6
00:00:23,110 --> 00:00:26,970
et à la place, de récupérer les données de notre magasin, car la

7
00:00:26,980 --> 00:00:32,650
différence sera que nous pourrons plus tard ajouter de la logique pour changer les données dans notre magasin alors que nos

8
00:00:32,650 --> 00:00:34,170
données factices ne changeront jamais.

9
00:00:34,180 --> 00:00:38,980
Nous devons donc importer les données de notre magasin, afin de pouvoir ensuite ajouter de la logique

10
00:00:39,280 --> 00:00:42,970
pour manipuler ces données, par exemple pour restreindre les repas que nous affichons.

11
00:00:42,980 --> 00:00:47,510
Alors, où avons-nous besoin des repas alors? Sur l'écran des catégories,

12
00:00:47,510 --> 00:00:52,130
nous n'importons pas de repas. Nous avons obtenu quelques autres importations dont nous pouvons nous débarrasser, mais ce

13
00:00:52,130 --> 00:00:52,490
n'est

14
00:00:52,550 --> 00:00:53,840
qu'une remarque, nous n'importons pas de repas.

15
00:00:53,870 --> 00:00:58,340
Les catégories peuvent y rester car, encore une fois, nous n'aurons aucune

16
00:00:58,490 --> 00:01:05,690
logique qui changera cela, nous pouvons donc continuer. L'écran des repas de catégorie est une autre histoire, nous importons des repas et

17
00:01:05,690 --> 00:01:09,530
maintenant l'objectif est de se débarrasser de cette importation et de sortir les repas du magasin

18
00:01:09,530 --> 00:01:16,640
Redux et la question est bien sûr, comment faire? Encore une fois, le package React Redux nous y aide. À partir de ce

19
00:01:16,730 --> 00:01:25,010
package React Redux, nous pouvons importer quelque chose, nous pouvons importer un hook, le hook de sélection d'utilisation.

20
00:01:25,020 --> 00:01:32,210
Cela nous permet de sélectionner une tranche de notre état, de notre état géré globalement et de l'utiliser dans ce composant.

21
00:01:32,220 --> 00:01:36,660
Maintenant, j'utilise le crochet ici parce que cela nous permet d'utiliser cela dans un composant fonctionnel, vous

22
00:01:36,660 --> 00:01:42,480
pourriez également être au courant d'une autre approche où vous importez réellement la fonction de connexion et enveloppez votre exportation avec cela

23
00:01:42,480 --> 00:01:47,220
et utilisez l'état de la carte dans les accessoires, la répartition de la carte pour les accessoires, c'est

24
00:01:47,220 --> 00:01:49,010
quelque chose que vous pouvez également

25
00:01:49,020 --> 00:01:51,560
utiliser, cela fonctionnera absolument, mais c'est un peu plus léger,

26
00:01:51,580 --> 00:01:56,140
donc je vais utiliser le sélecteur d'utilisation ici. Avec cela ajouté, maintenant lorsque nous

27
00:01:56,260 --> 00:01:59,510
utilisons nos repas, nous ne les utilisons pas comme ça,

28
00:01:59,710 --> 00:02:07,270
mais maintenant nous pouvons les obtenir à l'aide du sélecteur d'utilisation. Donc, pour dériver nos repas affichés, ce que je ferai

29
00:02:07,270 --> 00:02:15,400
ici, c'est que je vais créer une nouvelle constante, des repas disponibles peut-être, le nom est à vous et utilisez le sélecteur ici comme ceci

30
00:02:15,400 --> 00:02:19,920
car cela me récupérera des données hors de l'état et reviendra c'est donc ce

31
00:02:19,930 --> 00:02:25,450
que je vais ensuite stocker ici dans cette constante, la valeur retournée et le sélecteur d'utilisation prennent

32
00:02:26,110 --> 00:02:29,920
une fonction, une fonction qui sera exécutée pour nous par React Redux.

33
00:02:29,920 --> 00:02:36,430
Une fonction qui obtient automatiquement l'état comme argument, React Redux qui exécute la fonction pour nous fournira l'état

34
00:02:36,430 --> 00:02:44,140
actuel, l'état Redux actuel à cette fonction et il est alors en mesure de renvoyer toutes les données que nous voulons de

35
00:02:44,200 --> 00:02:48,810
cet état, de cet global magasin, de l'état mondial et j'utilise ces termes

36
00:02:48,850 --> 00:02:50,640
de manière interchangeable ici.

37
00:02:52,910 --> 00:02:56,380
Alors, comment pouvons-nous récupérer les données de cet état ici dans le corps

38
00:02:56,420 --> 00:03:01,370
de la fonction et j'utilise la notation de flèche de raccourci ici où sur le côté droit de la

39
00:03:01,370 --> 00:03:06,860
flèche, cela est automatiquement renvoyé s'il n'est pas entouré d'accolades. Eh bien, pour avoir accès à quelque chose de l'État,

40
00:03:06,860 --> 00:03:12,560
nous devons retourner à l'endroit où nous créons le magasin, là je passe dans un réducteur de racine qui est créé

41
00:03:12,560 --> 00:03:14,120
en combinant tous les réducteurs.

42
00:03:14,150 --> 00:03:17,250
Encore une fois, nous n'en avons qu'un, mais j'ai expliqué pourquoi je l'avais fait.

43
00:03:17,300 --> 00:03:20,980
Maintenant, nous avons cette clé, les repas qui vous appartiennent, vous pouvez

44
00:03:20,990 --> 00:03:22,640
nommer ce que vous voulez.

45
00:03:22,640 --> 00:03:29,030
Cela donne à cette tranche de notre état qui est gérée par ce réducteur un identifiant et

46
00:03:29,030 --> 00:03:32,950
nous pouvons maintenant utiliser cet identifiant pour mettre la

47
00:03:33,020 --> 00:03:37,820
main sur la partie de notre état dont ce réducteur est responsable.

48
00:03:37,820 --> 00:03:45,070
Donc à la fin, un état qui ressemblera à ceci, comme cet état initial. Donc dans l'écran de repas de

49
00:03:45,070 --> 00:03:51,210
catégorie, ici j'accède à l'état. les repas ou tout ce que vous avez choisi

50
00:03:51,310 --> 00:03:58,490
comme identifiant dans les réducteurs combinés, puis ici, j'accède aux repas filtrés. Pas des repas que j'aurais aussi là-bas, nous avons

51
00:03:58,540 --> 00:04:03,380
aussi des repas ici mais je veux respecter tous les filtres qui sont fixés.

52
00:04:03,450 --> 00:04:06,690
En ce moment, nous n'avons pas de logique pour les

53
00:04:06,760 --> 00:04:12,970
définir mais avec cela nous changerons à l'avenir, alors ici je veux obtenir mes repas filtrés afin que je reçoive

54
00:04:12,970 --> 00:04:17,930
toujours les repas que je devrais vraiment pouvoir afficher, les repas qui respectent les filtres mis

55
00:04:18,130 --> 00:04:25,420
en place par l'utilisateur et maintenant ce sont les repas disponibles que je veux filtrer encore plus ici pour trouver le repas pour la

56
00:04:25,420 --> 00:04:33,880
catégorie ID que j'ai sélectionnée ou les repas pour la catégorie que j'ai sélectionnée. Avec cela, il n'y a plus de repas en majuscules

57
00:04:33,890 --> 00:04:34,390
dans

58
00:04:34,400 --> 00:04:39,500
ce fichier, c'est tout simplement en minuscules ici et nous nous sommes débarrassés

59
00:04:39,500 --> 00:04:45,890
de cette importation avec succès, maintenant passons. Dans l'écran préféré, nous importons également des

60
00:04:45,890 --> 00:04:46,650
repas

61
00:04:46,670 --> 00:04:54,770
et, comme auparavant, nous devrions nous en débarrasser, alors faisons-le. Au lieu de cela, également comme auparavant, j'utiliserai le sélecteur d'utilisation

62
00:04:54,770 --> 00:05:02,720
de React Redux pour obtenir mes repas dans le magasin et donc ici où j'utilise les repas, j'obtiendrai réellement mes repas disponibles

63
00:05:02,720 --> 00:05:04,260
avec le sélecteur d'utilisation.

64
00:05:04,310 --> 00:05:10,370
Encore une fois, cela me donne un état et je peux accéder à l'état. repas. repas filtrés mais maintenant en fait ici

65
00:05:10,370 --> 00:05:11,240
pour les

66
00:05:11,240 --> 00:05:16,250
favoris, je ne veux pas respecter les filtres qui ont été définis parce qu'à mon avis, il

67
00:05:16,250 --> 00:05:21,000
est logique que lorsque nous voulons voir nos favoris, nous voyons toujours tous les favoris.

68
00:05:21,050 --> 00:05:25,930
Vous pourriez bien sûr avoir une logique différente et opter pour les repas filtrés mais je n'utiliserai que des

69
00:05:26,090 --> 00:05:28,490
repas ici, donc. repas. les repas

70
00:05:28,520 --> 00:05:36,950
peuvent sembler étranges, cela sélectionne la tranche de notre état, puis dans cette tranche, ce truc de repas accède ici à cette propriété de repas

71
00:05:36,950 --> 00:05:37,940
dans notre tranche

72
00:05:40,820 --> 00:05:46,180
d'état, mais bien sûr, si vous regardez votre réducteur, cela n'a de sens que parce que

73
00:05:46,180 --> 00:05:51,050
nous avoir une propriété de repas préférés ici et en effet nous le faisons.

74
00:05:51,330 --> 00:05:58,260
Donc en fait, nous n'avons plus besoin de filtrer nos favoris comme ça et ce n'était qu'un filtre factice de

75
00:05:58,260 --> 00:06:04,710
toute façon, il a toujours pris les repas avec m1 et m2 comme ID, à la place pour nos

76
00:06:04,760 --> 00:06:10,310
repas préférés, nous pouvons simplement les obtenir en accédant à ici, sur nos repas, déclinez vos

77
00:06:10,310 --> 00:06:16,880
plats préférés, donc cette propriété, car nous gérerons plus tard les repas préférés dans un tableau séparé dans notre

78
00:06:16,880 --> 00:06:18,280
magasin, donc c'est

79
00:06:18,290 --> 00:06:23,290
encore plus facile ici, code très court. Donc, avec cela, nous nous sommes débarrassés de l'importation des

80
00:06:23,300 --> 00:06:25,460
repas ici également, passons à l'écran des filtres.

81
00:06:25,460 --> 00:06:27,080
Il n'y a pas d'importation de

82
00:06:27,170 --> 00:06:29,840
repas ici, l'écran de détail des repas en a un.

83
00:06:29,840 --> 00:06:31,280
Alors là, je veux m'en

84
00:06:31,310 --> 00:06:33,220
débarrasser et maintenant ici, nous aurons

85
00:06:33,290 --> 00:06:39,800
besoin de cette autre propriété de repas que j'ai montrée il y a une seconde car ici encore, nous pouvons utiliser

86
00:06:40,610 --> 00:06:51,720
le sélecteur de React Redux pour sélectionner nos repas parce qu'ici, nous avons maintenant notre composant ici où nous utilisons nos repas et là-bas, je veux avoir un tableau avec tous les repas parce que j'essaie

87
00:06:51,810 --> 00:06:59,280
de charger un seul repas par ID et donc ma base, mon tableau dans lequel je cherche cet ID doit bien sûr être un

88
00:06:59,370 --> 00:07:04,440
tableau avec tous les repas et non filtré parce que je ne me soucie d'aucun filtre

89
00:07:04,440 --> 00:07:09,900
défini, ici je cherche un repas spécifique avec une ID spécifique et je veux obtenir une liste

90
00:07:09,900 --> 00:07:16,140
complète des repas et c'est donc là que nous aurons besoin de ce non filtré liste des repas que nous

91
00:07:16,140 --> 00:07:17,180
gérons ici.

92
00:07:20,140 --> 00:07:27,880
Donc donc ici, nous pouvons maintenant obtenir nos repas disponibles avec le sélecteur d'utilisation et là

93
00:07:27,880 --> 00:07:34,360
encore, nous utilisons les repas d'État. les repas maintenant pour de vrai et maintenant nous pouvons

94
00:07:34,420 --> 00:07:41,070
utiliser les repas disponibles ici pour trouver le repas avec cette ID. Avec cela, nous nous débarrassons également de cette importation ici, nous pouvons également supprimer l'importation de

95
00:07:41,070 --> 00:07:44,090
bouton maintenant que je le vois, mais nous aurons en fait un problème.

96
00:07:44,430 --> 00:07:51,780
Vous remarquerez peut-être que dans l'en-tête, j'essaie également de trouver un repas dans le tableau des repas et

97
00:07:51,780 --> 00:07:53,770
nous supprimons cette importation.

98
00:07:53,790 --> 00:07:59,010
Maintenant, le problème est également ici dans les options de navigation, nous ne pouvons pas utiliser le crochet de sélection d'utilisation parce

99
00:07:59,010 --> 00:08:04,170
que vous ne pouvez utiliser que des crochets à l'intérieur d'autres crochets ou à l'intérieur de composants fonctionnels et ce n'est ni

100
00:08:04,170 --> 00:08:08,340
plus ni moins, c'est une fonction normale, pas une fonction composant et aussi pas un crochet.

101
00:08:08,340 --> 00:08:11,870
Nous ne pouvons donc pas utiliser le sélecteur d'utilisation ici, donc cela ne fonctionnera pas.

102
00:08:11,900 --> 00:08:17,400
Maintenant, bien sûr, nous pourrions ramener l'importation de repas, mais ce serait un peu bon marché car dans les applications réelles,

103
00:08:17,400 --> 00:08:22,710
vous aurez parfois cette situation où vous aurez besoin de données de votre magasin Redux dans vos données de navigation

104
00:08:22,710 --> 00:08:23,160
et

105
00:08:23,190 --> 00:08:28,470
donc dans la prochaine conférence, nous allons aborder cela et nous assurer que nous pouvons également y accéder ici.