Das Ziel des Produktübersichtsbildschirms ist es natürlich, eine Liste aller Produkte anzuzeigen, die wir bestellen können. Daher
haben wir hier natürlich eine normale React-Komponente, daher müssen
wir React aus React importieren.
Wir müssen sicher auch eine Reihe von Dingen aus React Native importieren, zum Beispiel
brauche ich hier eine flache Liste, weil ich eine Liste von Produkten ausgeben werde. Wir wissen nicht, wie
lang diese Liste sein wird, aber sie ist möglicherweise sehr lang, daher möchten wir es für das
Scrollen optimieren können, und
genau das macht die flache Liste sofort, und wir können mehr Komponenten importieren, wenn wir sie benötigen.
Das sind also
die beiden Basisimporte. Jetzt erstelle ich hier einfach in diesem Funktionsformular meine Komponenten des Produktübersichtsbildschirms, in denen wir Requisiten erhalten, und am Ende müssen wir
hier etwas jsx zurückgeben, und am Ende werde ich es tun Exportieren Sie hier auch den Übersichtsbildschirm
für meine Produkte als Standard für diese Datei. Nun ist die Frage natürlich,
was da drin ist. Was ist in unserer Komponente enthalten und dort möchte
ich natürlich meine flache Liste rendern,
ich möchte meine flache Liste von Produkten rendern.
Jetzt haben wir natürlich noch keine Produkte, aber wir können einige hinzufügen. Nach wie vor werde ich daher einen Modellordner hinzufügen,
in dem ich festlegen kann, wie ein Produkt aussehen soll.
Dies ist kein Muss, kann Ihnen jedoch dabei helfen, Ihre Daten zu organisieren und sicherzustellen, dass Sie
niemals versehentlich mit verschiedenen Produkttypen arbeiten, bei denen Sie einfach vergessen haben, eine bestimmte Eigenschaft an einer Stelle
Ihrer App hinzuzufügen.
Also also hier in den Produkten. In js-Datei im Modellordner erstelle ich eine Produktklasse
mit einem Konstruktor, in dem ich definiere, wie ein Produkt aussehen soll, und ich möchte, dass jedes Produkt eine eindeutige
ID hat. Außerdem sollte es eine Eigentümer-ID haben, die die ID von ist der Benutzer, der es erstellt hat.
Es sollte einen Titel haben,
es sollte eine imageUrl haben, es sollte eine Beschreibung haben und es sollte einen Preis
haben, das sind die Dinge, die ein Produkt für mich in dieser Anwendung ausmachen.
Wenn wir nun all diese Dinge als Argumente im Konstruktor erhalten, möchte ich sie
natürlich in Eigenschaften dieses Objekts speichern, die wir mit Hilfe dieses Konstruktors erstellen können.
Deshalb mache ich diese Zuweisung, die Sie auch zuvor
gesehen haben, wo ich sie speichere Alle diese Daten erhalten wir in den Eigenschaften des erstellten Objekts.
Hier speichern wir also den Titel, die imageUrl, die IDs und natürlich die Beschreibung und den Preis. Mit dieser Einstellung haben wir eine Blaupause für ein Produkt
und werden diese dann in Redux verwenden. Am Ende erhalten wir eine solche
Liste von Produkten hier in unserem Produktübersichtsbildschirm. Um es dort hin zu bringen, müssen wir
Redux nutzen und damit dies möglich ist, müssen wir Redux einrichten.
Gehen wir also jetzt zum Speicherordner und dort möchte ich einen Unterordner für Aktionen und einen Unterordner
für Reduzierungen haben. In dieser App werden wir übrigens verschiedene Reduzierungen und Aktionen
haben, anders als im letzten Modul hier.
Im Moment beginnen wir also mit den Produkten. js Datei hier im
Reduzierungsordner und ich werde auch ein Produkt hinzufügen. js-Datei im Aktionsordner.
Wenn es Sie verwirrt, dass wir hier in verschiedenen Ordnern den gleichen Namen haben, können Sie immer
sehen, in welcher Datei ich hier oben mit dieser Breadcrumb-Funktion bin, und natürlich können
Sie auch mit verschiedenen Namen in Ihrer App arbeiten, wenn Das
ist verwirrend. Ich denke, es ist ziemlich klar, in welcher Datei ich arbeite. Es ist auch hier klar ausgewählt.
Beginnen wir also mit dem Produktreduzierer und dort möchte ich meinen Anfangszustand definieren, da diese
Art definiert, wie viele produktbezogene Zustandsscheiben aussehen werden, und natürlich gibt
es, wie immer bei der Programmierung, mehr als einen möglichen Ansatz,
denke ich Es ist sinnvoll zu sagen, dass wir eine Liste der verfügbaren Produkte haben, das ist ein Array und der
Benutzerprodukte und Benutzerprodukte. Dies sind einfach die
Produkte, die wir erstellt haben.
Die Eigentümer-ID ist also die ID des aktuell angemeldeten Benutzers und für die Momentan haben
wir keine Anmeldefunktion, aber später wird dies der Fall sein. Im Moment
werden Sie dies nur auf eine Dummy-Art einrichten. Verfügbares Produkt sollten alle Produkte sein oder vielleicht auch nur die Produkte, die
wir nicht erstellt haben, damit wir keine eigenen Produkte kaufen können. In der Realität können Sie in den meisten Geschäften auch
kaufen, was Sie verkaufen, also denke ich, dass wir das
auch können Nehmen Sie einfach alle Produkte hierher, aber das können Sie auch in Ihrer Anwendung optimieren.
Wir haben also diese beiden Produktarrays. In dem Reduzierer hier, der eine Funktion ist, in der wir den Zustand erhalten, der
mit unserem Anfangszustand initialisiert werden soll und
der als Standardwert verwendet werden soll, und in dem wir eine Aktion erhalten, werden wir dort später verschiedene Aktionstypen behandeln,
damit wir können Fügen Sie beispielsweise ein neues Produkt hinzu und so weiter. Im Moment werde ich hier einfach immer meinen Zustand zurückgeben
und daher werde ich natürlich
immer meinen Ausgangszustand zurückgeben, und das wird es uns ermöglichen, dann auf Redux zu
tippen und zumindest diesen Anfangszustand zu erhalten.
Ohne die Möglichkeit, neue Produkte hinzuzufügen, ist unser Ausgangszustand natürlich nicht so nützlich, da er hier
leere Produktlisten enthält, sodass wir
nichts rendern können.
So wie ich es
zuvor getan habe, werde ich auch einen Datenordner hinzufügen und hier einige Dummy-Daten einrichten, die wir nicht im gesamten Modul
verwenden, die wir aber vorerst verwenden können, damit wir einige Produkte für den Einstieg haben
mit und dafür finden Sie im Anhang diese Dummy-Daten. js Datei, die Sie einfach nehmen können, um Ihre zu ersetzen, oder wo Sie
einfach den Inhalt in Ihre Dummy-Daten kopieren können. js-Datei und was ich dort
mache, ist, dass ich mein Produktmodell importiere. Deshalb sollten
Sie natürlich sicherstellen, dass dieser Pfad für Sie korrekt ist, wenn Sie
nur meinen Code kopiert haben, und dann habe ich dieses Produktarray hier eingerichtet, wo ich eine Menge habe von
Dummy-Produkten und jetzt ist es wichtig, dass wir die ID des Produkts erhalten, dann die Eigentümer-ID, dann den Titel
und Sie sollten sicherstellen, dass Ihr Produktmodell so eingerichtet ist, dass diese Bestellung korrekt ist.
Hier erhalten wir also den Titel, dann die imageUrl als viertes Argument, das Sie erhalten, und dann die Beschreibung als
fünftes und den Preis als letztes Argument. Stellen Sie also
sicher, dass Ihr Produktmodell so eingerichtet ist, wie dies der Fall ist ist die Reihenfolge der Argumente.
Dies ist, was Sie
hier haben, am Ende exportiere ich dieses
Array als Standard und daher können wir dies jetzt in diesem Produktreduzierer einfach importieren.
Dort können wir also Produkte importieren, unsere Liste der Dummy-Produkte aus dem Datenordner und
dort aus den Dummy-Daten. js Datei und wir können unsere verfügbaren
Produkte für den Moment einfach mit Produkten hier initialisieren und die Benutzerprodukte können auch damit initialisiert werden, obwohl es
für die Benutzerprodukte einen kleinen Unterschied gibt, den ich machen möchte, ich möchte sie nach a filtern bestimmte Eigentümer-ID, da
am Ende nicht alle Produkte von uns erstellt werden. Stattdessen werde ich hier dieses Dummy-Array filtern
und jedes Produkt betrachten, das nur Produkte in meinem Benutzerprodukt-Array enthält, wobei die Eigentümer-ID gleich U1
ist. Wenn Sie sich die Dummy-Daten ansehen, ist dies bei einigen Produkten einfach nicht der Fall für alle.
Einige von ihnen haben die U1-Besitzer-ID und dies sind die Produkte, die ich hier
als Benutzerprodukte, als Dummy-Setup verwende. Damit ist hier unser Reduzierer für die Produkte eingerichtet. Wir können die Produktaktionen für den Moment ignorieren,
wir werden natürlich einige später hinzufügen und jetzt können wir zur App gehen. js Datei und dort auch
Redux einrichten.
Dafür müssen wir etwas aus Redux importieren
und natürlich müssen wir auch etwas aus React Redux importieren.
Dies ist etwas, das wir hier aus Redux importieren müssen,
und das ist natürlich die Funktion zum Erstellen eines Speichers und die kombinierten Reduzierungsfunktionen,
damit wir einen Root-Reduzierer erstellen können. Im Moment haben wir natürlich nur einen
Reduzierer, aber wie ich in dieser App erwähnt habe, werden wir am
Ende tatsächlich mehrere Reduzierer haben. Hier müssen Sie also definitiv Ihre Reduzierer kombinieren und von React Redux benötigen
wir die Anbieterkomponente, die wir verpacken um unsere App etwas zu bieten. Wir müssen dann natürlich auch den Produktreduzierer importieren
oder wie auch immer Sie ihn aus dem Speicherordner benennen möchten, dort von Reduzierern und dort aus
der Produktdatei, damit wir danach unseren Stammreduzierer erstellen können, indem wir kombinierte Reduzierer aufrufen,
wo wir dann Übergeben Sie ein Objekt, in dem wir Produkte zuordnen, aber das liegt bei Ihnen, unserem Produktreduzierer.
Später werden wir dort weitere Reduzierer hinzufügen. Dann können wir unseren Shop mit create store
erstellen. Dies führt letztendlich dazu, dass unser Root-Reduzierer als Argument und danach dort unten im jsx-Code werde ich
meine Provider-Komponente zwischen den öffnenden und schließenden Tags erstellen, ich werde dann auch später meinen Bildschirm
haben, für den Moment haben wir dort nichts, dies ist kein gültiger jsx Übrigens, aber
wir werden es später beheben und für die Provider-Komponente müssen wir
natürlich die Store-Requisite setzen und diese auf die Store-Konstante oder den Store im
Allgemeinen setzen, den wir hier erstellen. Damit sollte Redux eingerichtet werden, damit wir später hier auf
dem Produktübersichtsbildschirm darauf zugreifen können. Damit besteht der nächste Schritt natürlich auch darin, eine Navigation hinzuzufügen, damit
wir diesen Produktübersichtsbildschirm sehen können. Lassen Sie uns als nächstes weiter an diesen Schritten
arbeiten.