1
00:00:02,210 --> 00:00:08,690
Le but de l'écran de présentation des produits est bien sûr de présenter une liste de tous les produits que nous pouvons commander

2
00:00:09,830 --> 00:00:13,250
et donc ici, nous aurons bien sûr un composant React normal, nous devons

3
00:00:13,250 --> 00:00:15,490
donc importer React à partir de React.

4
00:00:15,620 --> 00:00:20,440
Nous devrons également importer un tas de choses à partir de React Native à coup sûr,

5
00:00:20,450 --> 00:00:26,330
par exemple, j'aurai besoin d'une liste plate ici car je produirai une liste de produits, nous ne savons pas combien de

6
00:00:26,330 --> 00:00:31,910
temps cette liste sera, mais elle est potentiellement très long, donc nous voulons être en mesure de l'optimiser pour

7
00:00:31,910 --> 00:00:33,440
le défilement et c'est ce

8
00:00:33,440 --> 00:00:39,050
que la liste plate fait hors de la boîte et nous pouvons importer plus de composants selon nos besoins.

9
00:00:40,460 --> 00:00:42,020
Ce sont donc les

10
00:00:42,020 --> 00:00:51,980
deux importations de base, maintenant avec ça je vais créer mes composants d'écran de présentation des produits ici simplement dans cette forme de fonction ici où nous recevons des accessoires et

11
00:00:52,070 --> 00:00:58,820
ensuite nous devons retourner du jsx ici à la fin et à la fin, je vais exporter également l'écran de

12
00:00:58,820 --> 00:01:05,360
présentation de mes produits ici par défaut de ce fichier. Maintenant, avec cela, la question est bien

13
00:01:05,370 --> 00:01:11,830
sûr ce qu'il y a là-dedans? Ce qui est à l'intérieur de notre composant et là-dedans,

14
00:01:11,910 --> 00:01:14,660
je veux bien sûr rendre ma liste

15
00:01:14,670 --> 00:01:17,610
plate, je veux rendre ma liste plate de produits.

16
00:01:17,610 --> 00:01:23,340
Bien sûr, nous n'avons pas encore de produits mais nous pouvons en ajouter. Comme précédemment, j'ajouterai donc un dossier modèles où

17
00:01:23,340 --> 00:01:26,380
je pourrai définir à quoi devrait ressembler un produit.

18
00:01:26,400 --> 00:01:32,130
Ce n'est pas indispensable, mais cela peut vous aider à organiser vos données et à vous assurer que vous ne

19
00:01:32,130 --> 00:01:37,980
travaillez jamais accidentellement avec différents types de produits, où vous avez simplement oublié d'ajouter une certaine propriété au même endroit

20
00:01:37,980 --> 00:01:39,120
de votre application.

21
00:01:39,180 --> 00:01:44,640
Donc donc ici dans les produits. fichier js dans le dossier models, je vais créer

22
00:01:44,640 --> 00:01:51,030
une classe de produit qui a un constructeur où je définis à quoi un produit doit ressembler et je veux que chaque

23
00:01:51,030 --> 00:01:57,200
produit ait un ID unique, il doit également avoir un ID de propriétaire qui est l'ID de l'utilisateur qui l'a créé.

24
00:01:57,540 --> 00:01:59,550
Il doit avoir un titre,

25
00:01:59,630 --> 00:02:04,320
il doit avoir une imageUrl, il doit avoir une description et il doit avoir un

26
00:02:04,320 --> 00:02:08,850
prix, ce sont les choses qui composent un produit pour moi dans cette application.

27
00:02:09,030 --> 00:02:13,890
Maintenant, bien sûr, lorsque nous recevons toutes ces choses comme arguments dans le constructeur, je veux

28
00:02:13,890 --> 00:02:18,570
les stocker dans les propriétés de cet objet que nous pouvons créer avec l'aide de

29
00:02:18,570 --> 00:02:21,960
ce constructeur, donc je fais cette affectation que vous avez

30
00:02:21,960 --> 00:02:27,570
également vue auparavant où je stocke toutes ces données que nous recevons dans les propriétés de l'objet créé.

31
00:02:27,570 --> 00:02:37,660
Donc ici, nous stockons le titre, l'imageUrl, les identifiants et bien sûr, la description et le prix. Avec cela configuré ici, nous avons un plan pour un produit

32
00:02:37,660 --> 00:02:44,350
et nous l'utiliserons ensuite dans Redux et nous obtiendrons finalement une telle liste de produits

33
00:02:44,350 --> 00:02:52,280
ici dans notre écran de présentation des produits. Maintenant, pour y arriver, nous devons puiser dans

34
00:02:52,280 --> 00:02:56,980
Redux et pour que cela soit possible, nous devons configurer Redux.

35
00:02:56,990 --> 00:03:03,080
Donc, allons dans le dossier de stockage maintenant et là-bas, je veux avoir un sous-dossier d'actions

36
00:03:03,080 --> 00:03:07,820
et un sous-dossier de réducteurs, dans cette application, nous aurons différents réducteurs

37
00:03:07,820 --> 00:03:10,640
et actions, contrairement au dernier module ici.

38
00:03:10,760 --> 00:03:13,760
Donc pour le moment, nous allons commencer par les produits. fichier js ici dans

39
00:03:13,830 --> 00:03:19,510
le dossier réducteurs et je vais également ajouter un produit. fichier js dans le dossier actions.

40
00:03:19,550 --> 00:03:24,980
Encore une fois, si cela vous déroute que nous ayons le même nom ici dans différents dossiers, vous pouvez toujours

41
00:03:24,980 --> 00:03:29,440
voir dans quel fichier je suis ici en haut ici avec cette fonction de fil d'Ariane

42
00:03:29,660 --> 00:03:33,480
et bien sûr, vous pouvez également travailler avec des noms différents dans votre

43
00:03:33,620 --> 00:03:39,380
application si c'est déroutant, je pense que c'est assez clair mais dans quel fichier je travaille, c'est clairement sélectionné ici aussi.

44
00:03:39,380 --> 00:03:45,200
Commençons donc dans le réducteur de produits et là-dedans, je veux définir mon état initial car ce

45
00:03:45,200 --> 00:03:49,600
type de définition du nombre de produits liés à la tranche d'état

46
00:03:49,880 --> 00:03:54,440
ressemblera et bien sûr, comme toujours en programmation, il y a plus d'une

47
00:03:54,440 --> 00:04:02,890
approche possible, je pense que est logique de dire que nous avons une liste de produits disponibles, c'est-à-dire un tableau et des produits utilisateur

48
00:04:03,190 --> 00:04:06,070
et des produits utilisateur, ce sont simplement les

49
00:04:06,070 --> 00:04:08,630
produits que nous avons créés, donc

50
00:04:08,710 --> 00:04:14,800
où l'ID du propriétaire est l'ID de l'utilisateur actuellement connecté et pour le moment, nous n'aurons pas

51
00:04:14,800 --> 00:04:19,450
de fonctionnalité de connexion, mais plus tard, ce sera le cas, pour le

52
00:04:19,450 --> 00:04:26,380
moment, vous allez simplement configurer cela de manière fictive. Le produit disponible doit être tous les produits ou peut-être aussi uniquement les produits que

53
00:04:26,380 --> 00:04:31,990
nous n'avons pas créés afin que nous ne puissions pas acheter nos propres produits, bien qu'en réalité dans la plupart des magasins, vous pouvez également

54
00:04:31,990 --> 00:04:34,990
acheter ce que vous vendez, donc je pense que nous pouvons également

55
00:04:34,990 --> 00:04:39,700
il suffit de prendre tous les produits ici, mais c'est quelque chose que vous pouvez également affiner dans votre application.

56
00:04:39,700 --> 00:04:47,920
Nous avons donc ces deux tableaux de produits. Maintenant, dans le réducteur ici, qui est une fonction où nous obtenons l'état qui devrait

57
00:04:47,920 --> 00:04:49,960
être initialisé avec notre état initial et

58
00:04:49,960 --> 00:04:55,360
qui devrait le prendre comme valeur par défaut et où nous obtenons une action, là-bas, nous traiterons plus tard différents

59
00:04:55,360 --> 00:05:02,260
types d'actions afin de pouvoir par exemple, ajoutez un nouveau produit, etc. Pour le moment, je vais juste toujours retourner mon état

60
00:05:02,260 --> 00:05:04,380
ici et donc je reviendrai

61
00:05:04,450 --> 00:05:09,610
toujours mon état initial bien sûr et cela nous permettra ensuite de puiser dans Redux

62
00:05:09,610 --> 00:05:12,300
et d'obtenir au moins cet état initial.

63
00:05:12,340 --> 00:05:19,210
Maintenant, bien sûr, sans possibilité d'ajouter de nouveaux produits, notre état initial n'est pas très utile, car il a des

64
00:05:19,210 --> 00:05:21,550
listes de produits vides ici, donc nous

65
00:05:21,700 --> 00:05:23,480
ne pouvons rien rendre.

66
00:05:23,740 --> 00:05:25,420
Donc, comme je l'ai fait

67
00:05:25,480 --> 00:05:32,080
auparavant, je vais également ajouter un dossier de données et configurer ici des données factices que nous n'utiliserons pas tout au

68
00:05:32,110 --> 00:05:37,150
long du module, mais que nous pouvons utiliser pour l'instant afin d'avoir des produits pour commencer

69
00:05:37,150 --> 00:05:43,390
avec et pour cela, vous trouverez ci-joint ces données fictives. fichier js que vous pouvez simplement prendre pour remplacer le vôtre ou où vous pouvez

70
00:05:43,390 --> 00:05:47,230
simplement copier le contenu dans vos données factices. le fichier js et ce que

71
00:05:47,230 --> 00:05:50,620
je fais là-bas, c'est que j'importe mon modèle de produit, donc

72
00:05:50,620 --> 00:05:54,700
bien sûr, vous devez donc vous assurer que ce chemin est correct pour vous

73
00:05:54,700 --> 00:06:00,940
si vous venez de copier mon code, puis j'ai configuré cette gamme de produits ici où j'ai un tas des produits factices

74
00:06:00,940 --> 00:06:07,150
et maintenant c'est important, nous obtenons l'ID du produit, puis nous avons l'ID du propriétaire, puis nous avons le titre et vous

75
00:06:07,150 --> 00:06:12,100
devez vous assurer que le modèle de votre produit est configuré pour que cette commande soit correcte.

76
00:06:12,130 --> 00:06:19,630
Donc, ici, nous obtenons le titre, puis nous avons l'imageUrl comme quatrième argument que vous recevez, puis vous avez la

77
00:06:19,630 --> 00:06:23,590
description comme cinquième et le prix comme dernier argument, alors

78
00:06:23,590 --> 00:06:30,250
assurez-vous que votre modèle de produit est configuré de la manière que cela est l'ordre des arguments.

79
00:06:30,250 --> 00:06:31,690
C'est ce que vous

80
00:06:31,930 --> 00:06:34,050
avez ici, à la fin j'exporte ce tableau

81
00:06:34,070 --> 00:06:38,160
par défaut et donc maintenant dans ce réducteur de produits, nous pouvons simplement l'importer.

82
00:06:38,170 --> 00:06:47,080
Ainsi, nous pouvons importer des produits, notre liste de produits factices à partir du dossier de données et là

83
00:06:47,080 --> 00:06:52,750
à partir des données factices. fichier js et nous pouvons simplement initialiser nos produits

84
00:06:52,750 --> 00:06:59,410
disponibles avec des produits ici pour le moment et les produits utilisateur peuvent également être initialisés avec cela, bien que pour les

85
00:06:59,440 --> 00:07:06,310
produits utilisateur il y ait une petite différence que je veux faire, je veux les filtrer pour un certain ID de propriétaire, car

86
00:07:06,310 --> 00:07:12,820
au final, tous les produits ne seront pas créés par nous. Au lieu de cela ici, je vais filtrer ce tableau

87
00:07:12,820 --> 00:07:19,420
factice, regarder tous les produits qui n'incluent que des produits dans mon tableau de produits utilisateur où l'ID du propriétaire est

88
00:07:19,420 --> 00:07:26,500
égal à U1, ce qui, si vous regardez les données factices, est tout simplement le cas pour certains produits, pas pour chacun

89
00:07:26,500 --> 00:07:26,960
d'eux.

90
00:07:27,010 --> 00:07:32,650
Certains d'entre eux ont l'ID de propriétaire U1 et ce seront les produits que j'utilise ici en tant que

91
00:07:32,650 --> 00:07:39,010
produits utilisateur, en tant que configuration fictive. avec cela notre réducteur pour les produits est installé ici. nous pouvons ignorer les actions des produits pour le

92
00:07:39,100 --> 00:07:45,070
moment, nous en ajouterons bien sûr plus tard et nous pouvons maintenant accéder à l'application. fichier js et y installer

93
00:07:45,070 --> 00:07:46,450
Redux également.

94
00:07:46,450 --> 00:07:50,100
Pour cela, nous devons importer quelque chose de Redux

95
00:07:50,140 --> 00:07:54,720
et bien sûr, nous devons également importer quelque chose de React Redux.

96
00:07:54,970 --> 00:07:58,870
Maintenant, c'est quelque chose que nous devons importer de Redux ici et

97
00:07:58,870 --> 00:08:04,060
c'est bien sûr la fonction de création de magasin et les fonctions de réduction combinées, afin

98
00:08:04,060 --> 00:08:08,910
que nous puissions créer un réducteur racine. Pour le moment, bien sûr, nous n'avons qu'un

99
00:08:08,920 --> 00:08:12,610
seul réducteur, mais comme je l'ai mentionné dans cette application, nous aurons en

100
00:08:12,610 --> 00:08:18,300
fait plusieurs réducteurs à la fin, donc ici, vous devez certainement combiner vos réducteurs et de React Redux, nous avons besoin

101
00:08:18,310 --> 00:08:25,750
du composant fournisseur que nous enveloppons autour de notre application pour fournir quelque chose. Nous devrons alors bien sûr aussi importer le réducteur

102
00:08:25,750 --> 00:08:33,600
de produits ou comme vous voulez le nommer depuis le dossier du magasin, là depuis les réducteurs et là depuis

103
00:08:33,660 --> 00:08:39,940
le fichier produits afin que nous puissions ensuite créer notre réducteur racine en appelant des

104
00:08:40,000 --> 00:08:48,490
réducteurs combinés, où nous passer dans un objet où nous mappons disons aux produits mais cela dépend de vous, notre réducteur de

105
00:08:48,520 --> 00:08:55,330
produits et plus tard nous y ajouterons plus de réducteurs et ensuite nous pouvons créer notre magasin

106
00:08:55,330 --> 00:09:03,280
avec create store et cela prend finalement notre réducteur racine comme argument et ensuite là-bas dans le code jsx, je

107
00:09:03,970 --> 00:09:11,230
vais créer mon composant fournisseur entre les balises d'ouverture et de fermeture, j'aurai ensuite aussi mon écran plus

108
00:09:11,230 --> 00:09:17,900
tard, pour le moment, nous n'aurons rien là-bas, ce n'est pas du jsx valide au fait, mais

109
00:09:17,920 --> 00:09:23,080
nous le corrigerons plus tard et pour le composant fournisseur, bien sûr, nous

110
00:09:23,080 --> 00:09:29,200
devons définir l'accessoire de magasin et le définir sur la constante de magasin ou le

111
00:09:29,200 --> 00:09:36,180
magasin en général que nous créons ici. Avec cela, Redux devrait être configuré, avec cela, nous pourrons plus tard y accéder

112
00:09:36,210 --> 00:09:42,120
ici à partir de l'écran de présentation des produits et avec cela, bien sûr, l'étape suivante consiste également à ajouter la navigation afin que

113
00:09:42,120 --> 00:09:46,670
nous puissions voir cet écran de présentation des produits. Continuons donc à travailler sur ces étapes

114
00:09:46,710 --> 00:09:47,190
ensuite.