Um Redux einzurichten, gehe ich genauso vor wie zu Beginn des Kurses,
füge einen Geschäftsordner hinzu und habe dort meine Places-Aktion. js Datei und mein Platz-Reduzierer. js Datei.
Das ist natürlich ein bisschen
anders als vorher, da ich einen Unterordner für Aktionen und
einen Reduzierer hatte, können Sie hier absolut
das Gleiche tun, da ich nur eine Aktion und einen Reduzierer habe. Ich werde dies
in zwei Dateien behalten, aber Sie
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
meines Gesamtstatus aussehen soll, und das ist sehr einfach.
Mein Anfangsstatus hier ist nur ein Javascript-Objekt, in dem ich einen leeren Platzschlüssel haben möchte , ein leeres
Array am Anfang, weil ich ein Array von Orten haben werde und das war's.
Daher kann ich hier diese Reduzierungsfunktion exportieren, die einen Zustand annimmt, der auf den Anfangszustand gesetzt ist, wenn kein
anderer
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
verschiedene Aktionen auszuführen, und fügen Sie beispielsweise einen neuen Ort hinzu. In der Ortsaktionsdatei exportiere ich eine neue Konstante,
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
Daten über den Ort und für den Ort enthalten soll Moment, das ist nur der Titel, später
wird das mehr sein und hier möchte
ich mein Aktionsobjekt zurückgeben,
dann wo der Typ Ort hinzufügen ist und wo ich dann nur meine Ortsdaten habe, sagen wir, die
im Moment natürlich nur bestehen der titel aber später nochmal, das wird mehr sein.
Das ist die grundlegende Redux-App, jetzt natürlich in der App. js
wir müssen alles verkabeln. Wie Sie in diesem Kurs gelernt haben, können
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
also auch installiert. Jetzt müssen wir
von Redux Store-Reducer erstellen und kombinieren und Middleware anwenden, um Redux Thunk anzuwenden. Von React Redux
benötigen wir diese Provider-Komponente. Damit können
wir, wie wir es im Kurs mehrmals getan haben, unseren Root-Reducer erstellen
mit Hilfe von Mähdreschern.
Dies erfordert ein Objekt, bei dem wir alle
Reduzierer zusammenführen. Jetzt haben wir hier offensichtlich nur einen Reduzierer und das ist der Platzreduzierer, den wir
aus dem Speicherordner importieren. Dort ist es die Ortsreduzierungsdatei, aber
natürlich könnten Sie mehr Reduzierer in Ihrer App haben und ich werde dies Orten zuordnen, sodass
der Ortsreduzierer hier der Ortskennung zugeordnet wird.
Jetzt können wir unseren Store mit der Funktion create store erstellen. Diese Funktion übernimmt den Root-Reduzierer und wir können auch
ein zweites Argument übergeben, bei dem wir Apply Middleware aufrufen und Redux Thunk an diese Funktion übergeben, damit das Redux
Thunk-Paket freundlich ist von hier in unseren Redux Flow eingesteckt. Mit all diesen Einstellungen können wir unseren Ortsnavigator
mit der Anbieterkomponente umschließen, da jeder Bildschirm in unserer App, in unserem Navigator, Zugriff auf das Geschäft und den
Anbieter haben sollte. Wir leiten das Geschäft durch die Geschäftsstütze und das ist der
Redux Setup haben wir auch mehrmals in diesem Kurs gesehen. Wenn Redux eingerichtet ist, können wir zum neuen Ortsbildschirm gehen und
sicherstellen, dass wir hier im Handler zum Speichern von Orten, der ausgelöst wird, wenn wir
auf diese Schaltfläche klicken, tatsächlich einen neuen Ort hinzufügen, der im Moment nur aus seinem Titel besteht, aber
aus Natürlich wird sich das im Laufe dieses Kurses ändern. Zu diesem Zweck können wir Use Dispatch aus React
Redux importieren und einfach Zugriff auf die Dispatch-Funktion erhalten, indem wir Use Dispatch dort oben
ausführen, und natürlich auch unsere Aktion importieren, zum Beispiel wieder mit dieser Import-Zusammenführungssyntax, und
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
und Orts versenden. Aktionen fügen Platz hinzu und leiten den Titel weiter, der natürlich in unserem Titelwert
gespeichert ist, also hier in diesem . Jetzt können wir diese Aktion auslösen. Im Ortsreduzierer
können wir jetzt unseren Aktionstyp
ä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
Übrigens der Standardfall, in dem wir nur den Status zurückgeben und daher diese
return-Anweisung dort unten loswerden können. Wenn wir nun einen zusätzlichen Ort haben,
können wir
hier und dafür auch einen neuen Ort erstellen Zuvor werde ich in diesem Kurs
einen Modellordner mit einem Platz hinzufügen. Dort befindet sich eine js-Datei, in der ich definieren möchte,
wie ein Ort in dieser Anwendung aussehen soll, nur um auf einfache Weise neue Ortsobjekte zu erstellen, die
immer gleich sind.
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
mit Hilfe des Konstruktors, um eine ID und eine zu haben Titel und später werden wir mehr hinzufügen, aber
im Moment
ist es das und
ich werde meine ID
hier speichern und ich werde meinen Titel hier in einer Eigenschaft speichern. Damit haben wir eine Blaupause für neue
Orte, zurück im Platzreduzierer, das können wir jetzt
verwenden.
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
neuen Ort aufrufen. Wenn Sie also einen neuen
Ort basierend auf unserer Klasse und für die ID initialisieren oder instanziieren, verwende ich im Moment eine Dummy-ID
des aktuellen Datums-Zeitstempels und des Der Titel ist jedoch natürlich etwas, das wir festlegen können, da dies Teil unserer Aktion ist.
Dort haben wir an der Stelle Daten eine title-Eigenschaft, die den vom Benutzer festgelegten Titel
enthält, sodass ich dies
hier auf Aktion setzen kann. placeData. Titel.
Dadurch wird ein neues Ortsobjekt erstellt,
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
nichts anderes in meinem Status habe und nichts hinzufügen werde, sodass ich einfach einen zurückgeben kann brandneues Staatsobjekt, wo
Orte jetzt Staat sind. setzt. concat, also das alte
Array, fügt ein neues Element hinzu und gibt ein brandneues Array zurück, das das alte Array hier
in unserem Bundesstaat
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
darum kümmern,
dies hier auf dem Bildschirm mit der Ortsliste auszugeben. Nur eine andere Sache: Wenn wir hier einen
neuen Ort hinzufügen, indem wir auf den
Handler zum Speichern von Orten klicken, möchte ich
auch zum Bildschirm mit der Ortsliste zurückkehren. Nachdem ich diese Aktion ausgelöst habe, verwende ich hier tatsächlich die Requisitennavigation, um
zurückzukehren um zum Ortslistenbildschirm zurückzukehren. Und jetzt arbeiten wir an diesem Bildschirm mit der Ortsliste und stellen sicher, dass wir
dort tatsächlich eine Liste der Orte ausgeben.