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
et donc ici, nous aurons bien sûr un composant React normal, nous devons
donc importer React à partir de React.
Nous devrons également importer un tas de choses à partir de React Native à coup sûr,
par exemple, j'aurai besoin d'une liste plate ici car je produirai une liste de produits, nous ne savons pas combien de
temps cette liste sera, mais elle est potentiellement très long, donc nous voulons être en mesure de l'optimiser pour
le défilement et c'est ce
que la liste plate fait hors de la boîte et nous pouvons importer plus de composants selon nos besoins.
Ce sont donc les
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
ensuite nous devons retourner du jsx ici à la fin et à la fin, je vais exporter également l'écran de
présentation de mes produits ici par défaut de ce fichier. Maintenant, avec cela, la question est bien
sûr ce qu'il y a là-dedans? Ce qui est à l'intérieur de notre composant et là-dedans,
je veux bien sûr rendre ma liste
plate, je veux rendre ma liste plate de produits.
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ù
je pourrai définir à quoi devrait ressembler un produit.
Ce n'est pas indispensable, mais cela peut vous aider à organiser vos données et à vous assurer que vous ne
travaillez jamais accidentellement avec différents types de produits, où vous avez simplement oublié d'ajouter une certaine propriété au même endroit
de votre application.
Donc donc ici dans les produits. fichier js dans le dossier models, je vais créer
une classe de produit qui a un constructeur où je définis à quoi un produit doit ressembler et je veux que chaque
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éé.
Il doit avoir un titre,
il doit avoir une imageUrl, il doit avoir une description et il doit avoir un
prix, ce sont les choses qui composent un produit pour moi dans cette application.
Maintenant, bien sûr, lorsque nous recevons toutes ces choses comme arguments dans le constructeur, je veux
les stocker dans les propriétés de cet objet que nous pouvons créer avec l'aide de
ce constructeur, donc je fais cette affectation que vous avez
également vue auparavant où je stocke toutes ces données que nous recevons dans les propriétés de l'objet créé.
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
et nous l'utiliserons ensuite dans Redux et nous obtiendrons finalement une telle liste de produits
ici dans notre écran de présentation des produits. Maintenant, pour y arriver, nous devons puiser dans
Redux et pour que cela soit possible, nous devons configurer Redux.
Donc, allons dans le dossier de stockage maintenant et là-bas, je veux avoir un sous-dossier d'actions
et un sous-dossier de réducteurs, dans cette application, nous aurons différents réducteurs
et actions, contrairement au dernier module ici.
Donc pour le moment, nous allons commencer par les produits. fichier js ici dans
le dossier réducteurs et je vais également ajouter un produit. fichier js dans le dossier actions.
Encore une fois, si cela vous déroute que nous ayons le même nom ici dans différents dossiers, vous pouvez toujours
voir dans quel fichier je suis ici en haut ici avec cette fonction de fil d'Ariane
et bien sûr, vous pouvez également travailler avec des noms différents dans votre
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.
Commençons donc dans le réducteur de produits et là-dedans, je veux définir mon état initial car ce
type de définition du nombre de produits liés à la tranche d'état
ressemblera et bien sûr, comme toujours en programmation, il y a plus d'une
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
et des produits utilisateur, ce sont simplement les
produits que nous avons créés, donc
où l'ID du propriétaire est l'ID de l'utilisateur actuellement connecté et pour le moment, nous n'aurons pas
de fonctionnalité de connexion, mais plus tard, ce sera le cas, pour le
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
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
acheter ce que vous vendez, donc je pense que nous pouvons également
il suffit de prendre tous les produits ici, mais c'est quelque chose que vous pouvez également affiner dans votre application.
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
être initialisé avec notre état initial et
qui devrait le prendre comme valeur par défaut et où nous obtenons une action, là-bas, nous traiterons plus tard différents
types d'actions afin de pouvoir par exemple, ajoutez un nouveau produit, etc. Pour le moment, je vais juste toujours retourner mon état
ici et donc je reviendrai
toujours mon état initial bien sûr et cela nous permettra ensuite de puiser dans Redux
et d'obtenir au moins cet état initial.
Maintenant, bien sûr, sans possibilité d'ajouter de nouveaux produits, notre état initial n'est pas très utile, car il a des
listes de produits vides ici, donc nous
ne pouvons rien rendre.
Donc, comme je l'ai fait
auparavant, je vais également ajouter un dossier de données et configurer ici des données factices que nous n'utiliserons pas tout au
long du module, mais que nous pouvons utiliser pour l'instant afin d'avoir des produits pour commencer
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
simplement copier le contenu dans vos données factices. le fichier js et ce que
je fais là-bas, c'est que j'importe mon modèle de produit, donc
bien sûr, vous devez donc vous assurer que ce chemin est correct pour vous
si vous venez de copier mon code, puis j'ai configuré cette gamme de produits ici où j'ai un tas des produits factices
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
devez vous assurer que le modèle de votre produit est configuré pour que cette commande soit correcte.
Donc, ici, nous obtenons le titre, puis nous avons l'imageUrl comme quatrième argument que vous recevez, puis vous avez la
description comme cinquième et le prix comme dernier argument, alors
assurez-vous que votre modèle de produit est configuré de la manière que cela est l'ordre des arguments.
C'est ce que vous
avez ici, à la fin j'exporte ce tableau
par défaut et donc maintenant dans ce réducteur de produits, nous pouvons simplement l'importer.
Ainsi, nous pouvons importer des produits, notre liste de produits factices à partir du dossier de données et là
à partir des données factices. fichier js et nous pouvons simplement initialiser nos produits
disponibles avec des produits ici pour le moment et les produits utilisateur peuvent également être initialisés avec cela, bien que pour les
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
au final, tous les produits ne seront pas créés par nous. Au lieu de cela ici, je vais filtrer ce tableau
factice, regarder tous les produits qui n'incluent que des produits dans mon tableau de produits utilisateur où l'ID du propriétaire est
égal à U1, ce qui, si vous regardez les données factices, est tout simplement le cas pour certains produits, pas pour chacun
d'eux.
Certains d'entre eux ont l'ID de propriétaire U1 et ce seront les produits que j'utilise ici en tant que
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
moment, nous en ajouterons bien sûr plus tard et nous pouvons maintenant accéder à l'application. fichier js et y installer
Redux également.
Pour cela, nous devons importer quelque chose de Redux
et bien sûr, nous devons également importer quelque chose de React Redux.
Maintenant, c'est quelque chose que nous devons importer de Redux ici et
c'est bien sûr la fonction de création de magasin et les fonctions de réduction combinées, afin
que nous puissions créer un réducteur racine. Pour le moment, bien sûr, nous n'avons qu'un
seul réducteur, mais comme je l'ai mentionné dans cette application, nous aurons en
fait plusieurs réducteurs à la fin, donc ici, vous devez certainement combiner vos réducteurs et de React Redux, nous avons besoin
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
de produits ou comme vous voulez le nommer depuis le dossier du magasin, là depuis les réducteurs et là depuis
le fichier produits afin que nous puissions ensuite créer notre réducteur racine en appelant des
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
produits et plus tard nous y ajouterons plus de réducteurs et ensuite nous pouvons créer notre magasin
avec create store et cela prend finalement notre réducteur racine comme argument et ensuite là-bas dans le code jsx, je
vais créer mon composant fournisseur entre les balises d'ouverture et de fermeture, j'aurai ensuite aussi mon écran plus
tard, pour le moment, nous n'aurons rien là-bas, ce n'est pas du jsx valide au fait, mais
nous le corrigerons plus tard et pour le composant fournisseur, bien sûr, nous
devons définir l'accessoire de magasin et le définir sur la constante de magasin ou le
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
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
nous puissions voir cet écran de présentation des produits. Continuons donc à travailler sur ces étapes
ensuite.