1 00:00:02,210 --> 00:00:08,690 Das Ziel des Produktübersichtsbildschirms ist es natürlich, eine Liste aller Produkte anzuzeigen, die wir bestellen können. Daher 2 00:00:09,830 --> 00:00:13,250 haben wir hier natürlich eine normale React-Komponente, daher müssen 3 00:00:13,250 --> 00:00:15,490 wir React aus React importieren. 4 00:00:15,620 --> 00:00:20,440 Wir müssen sicher auch eine Reihe von Dingen aus React Native importieren, zum Beispiel 5 00:00:20,450 --> 00:00:26,330 brauche ich hier eine flache Liste, weil ich eine Liste von Produkten ausgeben werde. Wir wissen nicht, wie 6 00:00:26,330 --> 00:00:31,910 lang diese Liste sein wird, aber sie ist möglicherweise sehr lang, daher möchten wir es für das 7 00:00:31,910 --> 00:00:33,440 Scrollen optimieren können, und 8 00:00:33,440 --> 00:00:39,050 genau das macht die flache Liste sofort, und wir können mehr Komponenten importieren, wenn wir sie benötigen. 9 00:00:40,460 --> 00:00:42,020 Das sind also 10 00:00:42,020 --> 00:00:51,980 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 11 00:00:52,070 --> 00:00:58,820 hier etwas jsx zurückgeben, und am Ende werde ich es tun Exportieren Sie hier auch den Übersichtsbildschirm 12 00:00:58,820 --> 00:01:05,360 für meine Produkte als Standard für diese Datei. Nun ist die Frage natürlich, 13 00:01:05,370 --> 00:01:11,830 was da drin ist. Was ist in unserer Komponente enthalten und dort möchte 14 00:01:11,910 --> 00:01:14,660 ich natürlich meine flache Liste rendern, 15 00:01:14,670 --> 00:01:17,610 ich möchte meine flache Liste von Produkten rendern. 16 00:01:17,610 --> 00:01:23,340 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, 17 00:01:23,340 --> 00:01:26,380 in dem ich festlegen kann, wie ein Produkt aussehen soll. 18 00:01:26,400 --> 00:01:32,130 Dies ist kein Muss, kann Ihnen jedoch dabei helfen, Ihre Daten zu organisieren und sicherzustellen, dass Sie 19 00:01:32,130 --> 00:01:37,980 niemals versehentlich mit verschiedenen Produkttypen arbeiten, bei denen Sie einfach vergessen haben, eine bestimmte Eigenschaft an einer Stelle 20 00:01:37,980 --> 00:01:39,120 Ihrer App hinzuzufügen. 21 00:01:39,180 --> 00:01:44,640 Also also hier in den Produkten. In js-Datei im Modellordner erstelle ich eine Produktklasse 22 00:01:44,640 --> 00:01:51,030 mit einem Konstruktor, in dem ich definiere, wie ein Produkt aussehen soll, und ich möchte, dass jedes Produkt eine eindeutige 23 00:01:51,030 --> 00:01:57,200 ID hat. Außerdem sollte es eine Eigentümer-ID haben, die die ID von ist der Benutzer, der es erstellt hat. 24 00:01:57,540 --> 00:01:59,550 Es sollte einen Titel haben, 25 00:01:59,630 --> 00:02:04,320 es sollte eine imageUrl haben, es sollte eine Beschreibung haben und es sollte einen Preis 26 00:02:04,320 --> 00:02:08,850 haben, das sind die Dinge, die ein Produkt für mich in dieser Anwendung ausmachen. 27 00:02:09,030 --> 00:02:13,890 Wenn wir nun all diese Dinge als Argumente im Konstruktor erhalten, möchte ich sie 28 00:02:13,890 --> 00:02:18,570 natürlich in Eigenschaften dieses Objekts speichern, die wir mit Hilfe dieses Konstruktors erstellen können. 29 00:02:18,570 --> 00:02:21,960 Deshalb mache ich diese Zuweisung, die Sie auch zuvor 30 00:02:21,960 --> 00:02:27,570 gesehen haben, wo ich sie speichere Alle diese Daten erhalten wir in den Eigenschaften des erstellten Objekts. 31 00:02:27,570 --> 00:02:37,660 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 32 00:02:37,660 --> 00:02:44,350 und werden diese dann in Redux verwenden. Am Ende erhalten wir eine solche 33 00:02:44,350 --> 00:02:52,280 Liste von Produkten hier in unserem Produktübersichtsbildschirm. Um es dort hin zu bringen, müssen wir 34 00:02:52,280 --> 00:02:56,980 Redux nutzen und damit dies möglich ist, müssen wir Redux einrichten. 35 00:02:56,990 --> 00:03:03,080 Gehen wir also jetzt zum Speicherordner und dort möchte ich einen Unterordner für Aktionen und einen Unterordner 36 00:03:03,080 --> 00:03:07,820 für Reduzierungen haben. In dieser App werden wir übrigens verschiedene Reduzierungen und Aktionen 37 00:03:07,820 --> 00:03:10,640 haben, anders als im letzten Modul hier. 38 00:03:10,760 --> 00:03:13,760 Im Moment beginnen wir also mit den Produkten. js Datei hier im 39 00:03:13,830 --> 00:03:19,510 Reduzierungsordner und ich werde auch ein Produkt hinzufügen. js-Datei im Aktionsordner. 40 00:03:19,550 --> 00:03:24,980 Wenn es Sie verwirrt, dass wir hier in verschiedenen Ordnern den gleichen Namen haben, können Sie immer 41 00:03:24,980 --> 00:03:29,440 sehen, in welcher Datei ich hier oben mit dieser Breadcrumb-Funktion bin, und natürlich können 42 00:03:29,660 --> 00:03:33,480 Sie auch mit verschiedenen Namen in Ihrer App arbeiten, wenn Das 43 00:03:33,620 --> 00:03:39,380 ist verwirrend. Ich denke, es ist ziemlich klar, in welcher Datei ich arbeite. Es ist auch hier klar ausgewählt. 44 00:03:39,380 --> 00:03:45,200 Beginnen wir also mit dem Produktreduzierer und dort möchte ich meinen Anfangszustand definieren, da diese 45 00:03:45,200 --> 00:03:49,600 Art definiert, wie viele produktbezogene Zustandsscheiben aussehen werden, und natürlich gibt 46 00:03:49,880 --> 00:03:54,440 es, wie immer bei der Programmierung, mehr als einen möglichen Ansatz, 47 00:03:54,440 --> 00:04:02,890 denke ich Es ist sinnvoll zu sagen, dass wir eine Liste der verfügbaren Produkte haben, das ist ein Array und der 48 00:04:03,190 --> 00:04:06,070 Benutzerprodukte und Benutzerprodukte. Dies sind einfach die 49 00:04:06,070 --> 00:04:08,630 Produkte, die wir erstellt haben. 50 00:04:08,710 --> 00:04:14,800 Die Eigentümer-ID ist also die ID des aktuell angemeldeten Benutzers und für die Momentan haben 51 00:04:14,800 --> 00:04:19,450 wir keine Anmeldefunktion, aber später wird dies der Fall sein. Im Moment 52 00:04:19,450 --> 00:04:26,380 werden Sie dies nur auf eine Dummy-Art einrichten. Verfügbares Produkt sollten alle Produkte sein oder vielleicht auch nur die Produkte, die 53 00:04:26,380 --> 00:04:31,990 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 54 00:04:31,990 --> 00:04:34,990 kaufen, was Sie verkaufen, also denke ich, dass wir das 55 00:04:34,990 --> 00:04:39,700 auch können Nehmen Sie einfach alle Produkte hierher, aber das können Sie auch in Ihrer Anwendung optimieren. 56 00:04:39,700 --> 00:04:47,920 Wir haben also diese beiden Produktarrays. In dem Reduzierer hier, der eine Funktion ist, in der wir den Zustand erhalten, der 57 00:04:47,920 --> 00:04:49,960 mit unserem Anfangszustand initialisiert werden soll und 58 00:04:49,960 --> 00:04:55,360 der als Standardwert verwendet werden soll, und in dem wir eine Aktion erhalten, werden wir dort später verschiedene Aktionstypen behandeln, 59 00:04:55,360 --> 00:05:02,260 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 60 00:05:02,260 --> 00:05:04,380 und daher werde ich natürlich 61 00:05:04,450 --> 00:05:09,610 immer meinen Ausgangszustand zurückgeben, und das wird es uns ermöglichen, dann auf Redux zu 62 00:05:09,610 --> 00:05:12,300 tippen und zumindest diesen Anfangszustand zu erhalten. 63 00:05:12,340 --> 00:05:19,210 Ohne die Möglichkeit, neue Produkte hinzuzufügen, ist unser Ausgangszustand natürlich nicht so nützlich, da er hier 64 00:05:19,210 --> 00:05:21,550 leere Produktlisten enthält, sodass wir 65 00:05:21,700 --> 00:05:23,480 nichts rendern können. 66 00:05:23,740 --> 00:05:25,420 So wie ich es 67 00:05:25,480 --> 00:05:32,080 zuvor getan habe, werde ich auch einen Datenordner hinzufügen und hier einige Dummy-Daten einrichten, die wir nicht im gesamten Modul 68 00:05:32,110 --> 00:05:37,150 verwenden, die wir aber vorerst verwenden können, damit wir einige Produkte für den Einstieg haben 69 00:05:37,150 --> 00:05:43,390 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 70 00:05:43,390 --> 00:05:47,230 einfach den Inhalt in Ihre Dummy-Daten kopieren können. js-Datei und was ich dort 71 00:05:47,230 --> 00:05:50,620 mache, ist, dass ich mein Produktmodell importiere. Deshalb sollten 72 00:05:50,620 --> 00:05:54,700 Sie natürlich sicherstellen, dass dieser Pfad für Sie korrekt ist, wenn Sie 73 00:05:54,700 --> 00:06:00,940 nur meinen Code kopiert haben, und dann habe ich dieses Produktarray hier eingerichtet, wo ich eine Menge habe von 74 00:06:00,940 --> 00:06:07,150 Dummy-Produkten und jetzt ist es wichtig, dass wir die ID des Produkts erhalten, dann die Eigentümer-ID, dann den Titel 75 00:06:07,150 --> 00:06:12,100 und Sie sollten sicherstellen, dass Ihr Produktmodell so eingerichtet ist, dass diese Bestellung korrekt ist. 76 00:06:12,130 --> 00:06:19,630 Hier erhalten wir also den Titel, dann die imageUrl als viertes Argument, das Sie erhalten, und dann die Beschreibung als 77 00:06:19,630 --> 00:06:23,590 fünftes und den Preis als letztes Argument. Stellen Sie also 78 00:06:23,590 --> 00:06:30,250 sicher, dass Ihr Produktmodell so eingerichtet ist, wie dies der Fall ist ist die Reihenfolge der Argumente. 79 00:06:30,250 --> 00:06:31,690 Dies ist, was Sie 80 00:06:31,930 --> 00:06:34,050 hier haben, am Ende exportiere ich dieses 81 00:06:34,070 --> 00:06:38,160 Array als Standard und daher können wir dies jetzt in diesem Produktreduzierer einfach importieren. 82 00:06:38,170 --> 00:06:47,080 Dort können wir also Produkte importieren, unsere Liste der Dummy-Produkte aus dem Datenordner und 83 00:06:47,080 --> 00:06:52,750 dort aus den Dummy-Daten. js Datei und wir können unsere verfügbaren 84 00:06:52,750 --> 00:06:59,410 Produkte für den Moment einfach mit Produkten hier initialisieren und die Benutzerprodukte können auch damit initialisiert werden, obwohl es 85 00:06:59,440 --> 00:07:06,310 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 86 00:07:06,310 --> 00:07:12,820 am Ende nicht alle Produkte von uns erstellt werden. Stattdessen werde ich hier dieses Dummy-Array filtern 87 00:07:12,820 --> 00:07:19,420 und jedes Produkt betrachten, das nur Produkte in meinem Benutzerprodukt-Array enthält, wobei die Eigentümer-ID gleich U1 88 00:07:19,420 --> 00:07:26,960 ist. Wenn Sie sich die Dummy-Daten ansehen, ist dies bei einigen Produkten einfach nicht der Fall für alle. 89 00:07:27,010 --> 00:07:32,650 Einige von ihnen haben die U1-Besitzer-ID und dies sind die Produkte, die ich hier 90 00:07:32,650 --> 00:07:39,010 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, 91 00:07:39,100 --> 00:07:45,070 wir werden natürlich einige später hinzufügen und jetzt können wir zur App gehen. js Datei und dort auch 92 00:07:45,070 --> 00:07:46,450 Redux einrichten. 93 00:07:46,450 --> 00:07:50,100 Dafür müssen wir etwas aus Redux importieren 94 00:07:50,140 --> 00:07:54,720 und natürlich müssen wir auch etwas aus React Redux importieren. 95 00:07:54,970 --> 00:07:58,870 Dies ist etwas, das wir hier aus Redux importieren müssen, 96 00:07:58,870 --> 00:08:04,060 und das ist natürlich die Funktion zum Erstellen eines Speichers und die kombinierten Reduzierungsfunktionen, 97 00:08:04,060 --> 00:08:08,910 damit wir einen Root-Reduzierer erstellen können. Im Moment haben wir natürlich nur einen 98 00:08:08,920 --> 00:08:12,610 Reduzierer, aber wie ich in dieser App erwähnt habe, werden wir am 99 00:08:12,610 --> 00:08:18,300 Ende tatsächlich mehrere Reduzierer haben. Hier müssen Sie also definitiv Ihre Reduzierer kombinieren und von React Redux benötigen 100 00:08:18,310 --> 00:08:25,750 wir die Anbieterkomponente, die wir verpacken um unsere App etwas zu bieten. Wir müssen dann natürlich auch den Produktreduzierer importieren 101 00:08:25,750 --> 00:08:33,600 oder wie auch immer Sie ihn aus dem Speicherordner benennen möchten, dort von Reduzierern und dort aus 102 00:08:33,660 --> 00:08:39,940 der Produktdatei, damit wir danach unseren Stammreduzierer erstellen können, indem wir kombinierte Reduzierer aufrufen, 103 00:08:40,000 --> 00:08:48,490 wo wir dann Übergeben Sie ein Objekt, in dem wir Produkte zuordnen, aber das liegt bei Ihnen, unserem Produktreduzierer. 104 00:08:48,520 --> 00:08:55,330 Später werden wir dort weitere Reduzierer hinzufügen. Dann können wir unseren Shop mit create store 105 00:08:55,330 --> 00:09:03,280 erstellen. Dies führt letztendlich dazu, dass unser Root-Reduzierer als Argument und danach dort unten im jsx-Code werde ich 106 00:09:03,970 --> 00:09:11,230 meine Provider-Komponente zwischen den öffnenden und schließenden Tags erstellen, ich werde dann auch später meinen Bildschirm 107 00:09:11,230 --> 00:09:17,900 haben, für den Moment haben wir dort nichts, dies ist kein gültiger jsx Übrigens, aber 108 00:09:17,920 --> 00:09:23,080 wir werden es später beheben und für die Provider-Komponente müssen wir 109 00:09:23,080 --> 00:09:29,200 natürlich die Store-Requisite setzen und diese auf die Store-Konstante oder den Store im 110 00:09:29,200 --> 00:09:36,180 Allgemeinen setzen, den wir hier erstellen. Damit sollte Redux eingerichtet werden, damit wir später hier auf 111 00:09:36,210 --> 00:09:42,120 dem Produktübersichtsbildschirm darauf zugreifen können. Damit besteht der nächste Schritt natürlich auch darin, eine Navigation hinzuzufügen, damit 112 00:09:42,120 --> 00:09:46,670 wir diesen Produktübersichtsbildschirm sehen können. Lassen Sie uns als nächstes weiter an diesen Schritten 113 00:09:46,710 --> 00:09:47,190 arbeiten.