1 00:00:02,290 --> 00:00:05,850 Um Redux einzurichten, gehe ich genauso vor wie zu Beginn des Kurses, 2 00:00:05,950 --> 00:00:14,470 füge einen Geschäftsordner hinzu und habe dort meine Places-Aktion. js Datei und mein Platz-Reduzierer. js Datei. 3 00:00:14,470 --> 00:00:16,310 Das ist natürlich ein bisschen 4 00:00:16,330 --> 00:00:19,310 anders als vorher, da ich einen Unterordner für Aktionen und 5 00:00:19,390 --> 00:00:21,520 einen Reduzierer hatte, können Sie hier absolut 6 00:00:21,520 --> 00:00:25,950 das Gleiche tun, da ich nur eine Aktion und einen Reduzierer habe. Ich werde dies 7 00:00:25,960 --> 00:00:27,820 in zwei Dateien behalten, aber Sie 8 00:00:27,820 --> 00:00:34,840 könnten es haben Unterordner und so weiter, das liegt ganz bei Ihnen. Jetzt werde ich im Ortsreduzierer definieren, wie mein Status für diesen Teil 9 00:00:34,840 --> 00:00:37,990 meines Gesamtstatus aussehen soll, und das ist sehr einfach. 10 00:00:37,990 --> 00:00:43,510 Mein Anfangsstatus hier ist nur ein Javascript-Objekt, in dem ich einen leeren Platzschlüssel haben möchte , ein leeres 11 00:00:43,510 --> 00:00:47,810 Array am Anfang, weil ich ein Array von Orten haben werde und das war's. 12 00:00:47,830 --> 00:00:53,830 Daher kann ich hier diese Reduzierungsfunktion exportieren, die einen Zustand annimmt, der auf den Anfangszustand gesetzt ist, wenn kein 13 00:00:53,830 --> 00:00:54,190 anderer 14 00:00:54,190 --> 00:01:01,450 Zustand übergeben wird, und eine Aktion, und dort werde ich vorerst nur diesen Zustand zurückgeben, natürlich werden wir ' Fügen Sie Logik hinzu, um 15 00:01:01,450 --> 00:01:08,320 verschiedene Aktionen auszuführen, und fügen Sie beispielsweise einen neuen Ort hinzu. In der Ortsaktionsdatei exportiere ich eine neue Konstante, 16 00:01:08,320 --> 00:01:16,890 füge einen Ort hinzu, der eine Aktionskennung ist, die ich benötige, und füge eine Aktionserstellungsfunktion hinzu, füge einen Ort hinzu, der einige 17 00:01:16,890 --> 00:01:23,640 Daten über den Ort und für den Ort enthalten soll Moment, das ist nur der Titel, später 18 00:01:23,640 --> 00:01:26,290 wird das mehr sein und hier möchte 19 00:01:26,290 --> 00:01:28,420 ich mein Aktionsobjekt zurückgeben, 20 00:01:28,420 --> 00:01:35,560 dann wo der Typ Ort hinzufügen ist und wo ich dann nur meine Ortsdaten habe, sagen wir, die 21 00:01:35,560 --> 00:01:41,200 im Moment natürlich nur bestehen der titel aber später nochmal, das wird mehr sein. 22 00:01:41,260 --> 00:01:43,630 Das ist die grundlegende Redux-App, jetzt natürlich in der App. js 23 00:01:43,660 --> 00:01:50,670 wir müssen alles verkabeln. Wie Sie in diesem Kurs gelernt haben, können 24 00:01:51,280 --> 00:02:02,010 wir dort etwas aus Redux und auch etwas aus React Redux importieren und auch Redux Thunk aus Redux Thunk importieren. Aus diesem Paket haben wir 25 00:02:02,040 --> 00:02:05,160 also auch installiert. Jetzt müssen wir 26 00:02:05,160 --> 00:02:12,270 von Redux Store-Reducer erstellen und kombinieren und Middleware anwenden, um Redux Thunk anzuwenden. Von React Redux 27 00:02:12,270 --> 00:02:15,210 benötigen wir diese Provider-Komponente. Damit können 28 00:02:15,690 --> 00:02:21,240 wir, wie wir es im Kurs mehrmals getan haben, unseren Root-Reducer erstellen 29 00:02:21,240 --> 00:02:23,120 mit Hilfe von Mähdreschern. 30 00:02:23,130 --> 00:02:26,370 Dies erfordert ein Objekt, bei dem wir alle 31 00:02:26,370 --> 00:02:33,090 Reduzierer zusammenführen. Jetzt haben wir hier offensichtlich nur einen Reduzierer und das ist der Platzreduzierer, den wir 32 00:02:33,090 --> 00:02:37,140 aus dem Speicherordner importieren. Dort ist es die Ortsreduzierungsdatei, aber 33 00:02:37,140 --> 00:02:43,680 natürlich könnten Sie mehr Reduzierer in Ihrer App haben und ich werde dies Orten zuordnen, sodass 34 00:02:43,710 --> 00:02:46,690 der Ortsreduzierer hier der Ortskennung zugeordnet wird. 35 00:02:46,890 --> 00:02:53,460 Jetzt können wir unseren Store mit der Funktion create store erstellen. Diese Funktion übernimmt den Root-Reduzierer und wir können auch 36 00:02:53,490 --> 00:03:00,300 ein zweites Argument übergeben, bei dem wir Apply Middleware aufrufen und Redux Thunk an diese Funktion übergeben, damit das Redux 37 00:03:00,330 --> 00:03:07,800 Thunk-Paket freundlich ist von hier in unseren Redux Flow eingesteckt. Mit all diesen Einstellungen können wir unseren Ortsnavigator 38 00:03:07,800 --> 00:03:15,810 mit der Anbieterkomponente umschließen, da jeder Bildschirm in unserer App, in unserem Navigator, Zugriff auf das Geschäft und den 39 00:03:15,810 --> 00:03:21,750 Anbieter haben sollte. Wir leiten das Geschäft durch die Geschäftsstütze und das ist der 40 00:03:21,750 --> 00:03:30,160 Redux Setup haben wir auch mehrmals in diesem Kurs gesehen. Wenn Redux eingerichtet ist, können wir zum neuen Ortsbildschirm gehen und 41 00:03:30,160 --> 00:03:35,380 sicherstellen, dass wir hier im Handler zum Speichern von Orten, der ausgelöst wird, wenn wir 42 00:03:35,380 --> 00:03:41,530 auf diese Schaltfläche klicken, tatsächlich einen neuen Ort hinzufügen, der im Moment nur aus seinem Titel besteht, aber 43 00:03:41,530 --> 00:03:49,450 aus Natürlich wird sich das im Laufe dieses Kurses ändern. Zu diesem Zweck können wir Use Dispatch aus React 44 00:03:50,730 --> 00:03:57,300 Redux importieren und einfach Zugriff auf die Dispatch-Funktion erhalten, indem wir Use Dispatch dort oben 45 00:03:57,390 --> 00:04:03,930 ausführen, und natürlich auch unsere Aktion importieren, zum Beispiel wieder mit dieser Import-Zusammenführungssyntax, und 46 00:04:04,380 --> 00:04:14,370 alles als Orte importieren Aktionen aus dem Store und dort, die Places-Actions-Datei und damit können wir den Place-Handler speichern, den Versand hier aufrufen 47 00:04:14,370 --> 00:04:21,960 und Orts versenden. Aktionen fügen Platz hinzu und leiten den Titel weiter, der natürlich in unserem Titelwert 48 00:04:21,960 --> 00:04:29,500 gespeichert ist, also hier in diesem . Jetzt können wir diese Aktion auslösen. Im Ortsreduzierer 49 00:04:29,650 --> 00:04:32,170 können wir jetzt unseren Aktionstyp 50 00:04:32,170 --> 00:04:44,400 ändern oder verwenden, wenn natürlich überprüft wird und nach dem Status oder der Aktion zum Hinzufügen von Orten gesucht wird, die wir aus Aktionen für Orte importieren 51 00:04:44,400 --> 00:04:50,400 Übrigens der Standardfall, in dem wir nur den Status zurückgeben und daher diese 52 00:04:50,400 --> 00:04:56,160 return-Anweisung dort unten loswerden können. Wenn wir nun einen zusätzlichen Ort haben, 53 00:04:56,220 --> 00:04:57,240 können wir 54 00:04:57,930 --> 00:05:04,260 hier und dafür auch einen neuen Ort erstellen Zuvor werde ich in diesem Kurs 55 00:05:04,260 --> 00:05:10,290 einen Modellordner mit einem Platz hinzufügen. Dort befindet sich eine js-Datei, in der ich definieren möchte, 56 00:05:10,290 --> 00:05:15,900 wie ein Ort in dieser Anwendung aussehen soll, nur um auf einfache Weise neue Ortsobjekte zu erstellen, die 57 00:05:15,900 --> 00:05:17,190 immer gleich sind. 58 00:05:17,190 --> 00:05:24,510 Hier erstelle ich eine Klasse und exportiere diese als Standarddatei. Jetzt liegt es natürlich an Ihnen, wie Ihr Platz aussehen soll. Ich definiere meine 59 00:05:24,510 --> 00:05:30,180 mit Hilfe des Konstruktors, um eine ID und eine zu haben Titel und später werden wir mehr hinzufügen, aber 60 00:05:30,570 --> 00:05:31,460 im Moment 61 00:05:31,530 --> 00:05:32,670 ist es das und 62 00:05:32,670 --> 00:05:34,020 ich werde meine ID 63 00:05:34,230 --> 00:05:41,280 hier speichern und ich werde meinen Titel hier in einer Eigenschaft speichern. Damit haben wir eine Blaupause für neue 64 00:05:41,280 --> 00:05:45,390 Orte, zurück im Platzreduzierer, das können wir jetzt 65 00:05:45,630 --> 00:05:46,440 verwenden. 66 00:05:46,440 --> 00:05:55,170 Dort können wir also den Ort aus dem Modellordner und dort den Ort importieren. js-Datei und dann hier erstellen Sie einen neuen Ort, indem Sie einen 67 00:05:55,170 --> 00:05:58,080 neuen Ort aufrufen. Wenn Sie also einen neuen 68 00:05:58,080 --> 00:06:04,560 Ort basierend auf unserer Klasse und für die ID initialisieren oder instanziieren, verwende ich im Moment eine Dummy-ID 69 00:06:04,560 --> 00:06:12,050 des aktuellen Datums-Zeitstempels und des Der Titel ist jedoch natürlich etwas, das wir festlegen können, da dies Teil unserer Aktion ist. 70 00:06:12,060 --> 00:06:17,130 Dort haben wir an der Stelle Daten eine title-Eigenschaft, die den vom Benutzer festgelegten Titel 71 00:06:17,130 --> 00:06:18,720 enthält, sodass ich dies 72 00:06:18,720 --> 00:06:24,630 hier auf Aktion setzen kann. placeData. Titel. 73 00:06:24,630 --> 00:06:26,530 Dadurch wird ein neues Ortsobjekt erstellt, 74 00:06:26,670 --> 00:06:33,600 und jetzt können wir hier einen neuen Status zurückgeben, in dem Orte und ich den alten Status nicht kopieren müssen, da ich hier 75 00:06:33,600 --> 00:06:39,480 nichts anderes in meinem Status habe und nichts hinzufügen werde, sodass ich einfach einen zurückgeben kann brandneues Staatsobjekt, wo 76 00:06:39,900 --> 00:06:44,020 Orte jetzt Staat sind. setzt. concat, also das alte 77 00:06:44,040 --> 00:06:49,710 Array, fügt ein neues Element hinzu und gibt ein brandneues Array zurück, das das alte Array hier 78 00:06:49,710 --> 00:06:51,050 in unserem Bundesstaat 79 00:06:51,300 --> 00:06:59,310 ersetzt, und ich konzentriere natürlich meinen neuen Ort. Damit sollten wir eine Liste von Orten haben, die wir verwalten. In der nächsten Vorlesung können wir uns jetzt 80 00:06:59,310 --> 00:07:00,220 darum kümmern, 81 00:07:00,240 --> 00:07:06,390 dies hier auf dem Bildschirm mit der Ortsliste auszugeben. Nur eine andere Sache: Wenn wir hier einen 82 00:07:06,390 --> 00:07:09,310 neuen Ort hinzufügen, indem wir auf den 83 00:07:09,390 --> 00:07:12,560 Handler zum Speichern von Orten klicken, möchte ich 84 00:07:12,570 --> 00:07:20,610 auch zum Bildschirm mit der Ortsliste zurückkehren. Nachdem ich diese Aktion ausgelöst habe, verwende ich hier tatsächlich die Requisitennavigation, um 85 00:07:20,610 --> 00:07:25,530 zurückzukehren um zum Ortslistenbildschirm zurückzukehren. Und jetzt arbeiten wir an diesem Bildschirm mit der Ortsliste und stellen sicher, dass wir 86 00:07:25,530 --> 00:07:26,760 dort tatsächlich eine Liste der Orte ausgeben.