Jetzt sind wir dem Ende dieses Moduls sehr nahe. Daher müssen wir sicherstellen, dass wir jetzt
Aktionen zum Erstellen eines neuen Produkts oder zum Aktualisieren eines
Produkts auslösen. Daher müssen wir diese Aktionen zunächst hier in unserem Aktionsordner hinzufügen .
Also exportiere ich hier eine Konstante, erstelle hier ein Produkt wie dieses, erstelle ein Produkt und dann auch hier eine weitere Kennung für
die Aktualisierung des Produkts mit dem Update-Produkt und dem Update-Produkt wie diesem und erstelle passende Aktionsersteller oder erstelle
ein Produkt, und jetzt liegt es an Ihnen Wie möchten Sie dies strukturieren, welche Daten erwarten Sie
beim Erstellen eines Produkts?
Ich bin ein Fan davon, das Produkt wirklich hier in der Aktion oder
im Reduzierer zu erstellen, also erwarte ich tatsächlich, hier einen Titel, eine Beschreibung, eine imageUrl und einen Preis
zu erhalten, und dann gebe ich ein Aktionsobjekt zurück, wo der Typ ist Produkt erstellen und die Produktdaten sind einfach alle diese
Daten zusammengeführt.
Hier habe ich also meinen Titel, der dem Titel zugeordnet ist, den wir als Argument erhalten, eine Beschreibung, die der
Beschreibung zugeordnet ist, und daher können wir auch eine moderne Javascript-Verknüpfung verwenden. Wenn der
Name der Eigenschaft und der Name der Wertvariablen identisch
sind, können Sie einfach schreiben es ist so, also wenn es dasselbe ist wie Preis:
Preis, können wir dies
einfach hier schreiben, das ist natürlich auch für Titel und Beschreibung möglich, damit wir alle diese Argumente in Eigenschaften mit demselben
Namen in diesem Objekt abbilden und wenn wir aktualisieren Ein Produkt, das relativ gleich ist, aktualisieren Sie das Produkt, sodass wir es im Allgemeinen kopieren
können, aber es gibt einen wichtigen Unterschied. Hier benötigen wir auch die ID des Produkts, das geändert werden muss,
sodass wir dies als zusätzliches Argument erhalten und dies in unserer Aktion daher in einer separaten Eigenschaft unseres Aktionsobjekts speichern können. Jetzt im Reduzierer müssen wir
das
natürlich erledigen,
wir müssen die Erstellung und Aktualisierung übernehmen. Fügen wir hier im Produktreduzierer einen neuen Fall hinzu, um ein Produkt zu
erstellen. Stellen Sie dazu sicher, dass Sie ein Produkt aus Aktionsprodukten erstellen und natürlich einen, um ein Produkt mit einem
Update-Produkt zu aktualisieren. Stellen Sie sicher, dass Sie auch diesen importieren.
Beim Erstellen eines Produkts müssen wir natürlich ein neues Produkt erstellen, und ich werde es hier in einer Konstante
mit dem neuen Schlüsselwort in dem zuvor erstellten
Produktmodell speichern. Dazu müssen Sie nur sicherstellen, dass Sie dieses Produktmodell von hier importieren Der Modellordner und das Produkt hier
erhalten eine ID, die vorerst manuell mit einem neuen Datum für die Zeichenfolge generiert werden kann, um für den
Moment später eine Art pseudo-eindeutige Dummy-ID zu erhalten. Diese wird auf einem Server generiert, aber das haben wir
noch nicht .
Die Besitzer-ID ist derzeit fest auf U1 codiert, da wir derzeit keine Benutzer in dieser App haben,
aber Titel usw. können mit Daten aus der Aktion gefüllt werden, da wir in der Aktion zum Erstellen eines
Produkts den Produktdatenschlüssel haben und dieser einen enthält Objekt mit Titel, Beschreibung,
imageUrl und Preis und diese Daten
können wir jetzt abrufen.
Hier für den Titel erhalten wir Action productData. Titel, für die imageUrl ist es Aktion. Produktdaten.
imageUrl, nicht überraschend für die Beschreibung, es ist Aktion. Produktdaten.
Beschreibung und für den Preis ist es Aktion. Produktdaten. Preis. Dies ist jetzt ein neues Produkt, das ich erstelle.
Jetzt müssen wir es zu unserem Shop hinzufügen, indem wir unseren aktualisierten Status hier zurückgeben, wo ich zuerst
den vorhandenen Status kopiere und ihn jetzt sowohl zu den verfügbaren Produkten als auch zu
den Benutzerprodukten hinzufügen muss, da wir ihn erstellt haben Für uns muss es also Teil sowohl der Arrays als
auch der verfügbaren Produkte sein. Nun können wir diese verfügbaren Produkte verwenden und concat verwenden, um ein neues
Array zu erhalten, das das alte Array ist, und ein neues Element hinzuzufügen. Hier ist ein neues Produkt Dieses neue Element
und ich machen hier genau das Gleiche für Benutzerprodukte.
Hier verwende ich also staatliche Benutzerprodukte und konzentriere mein neues Produkt. Was ist nun mit der Aktualisierung? Für die Aktualisierung müssen wir
zunächst den Index des aktuellen Produkts
ermitteln, damit der Produktindex ein konstanter Name sein kann, indem Sie auf unsere Benutzerprodukte zugreifen. Dort finden Sie
den Suchindex, eine integrierte Javascript-Methode der Index eines bestimmten Elements.
Dies erfordert wiederum eine Funktion, die für jedes Element in diesem Array ausgeführt wird und true zurückgeben muss,
damit wir einen Index haben. Dort werde ich die IDs überprüfen und nach den IDs suchen,
bei denen sie meiner PID entsprechen,
meiner Aktions-PID, denn wenn Sie erinnern sich, wie wir diese Aktion eingerichtet haben. Zum Aktualisieren haben wir hier das
PID-Feld, das die Produkt-IDs enthält, die wir erhalten.
Also suche ich nach diesem Produkt und speichere dann den Index dieses Produkts im Array der
Benutzerprodukte im Produktindex. Jetzt können wir
hier ein aktualisiertes Produkt erstellen, das technisch gesehen ein neues Produktobjekt ist, aber natürlich mit einem alten
vorbelegt ist Daten, zum Beispiel
behalten wir die
ID, also nehmen wir hier die Aktions-PID als Wert.
Ich behalte auch die Eigentümer-ID und kann dafür auf staatliche Benutzerprodukte für den Index zugreifen, den
wir gerade herausfinden, also für diesen Produktindex. ownerID, das werde ich nicht ändern.
Natürlich werde ich den neuen Titel
speichern, also werde ich hier Action speichern. Produktdaten. Titel, ich werde die neue imageUrl speichern, also Aktion. Produktdaten.
imageUrl und ich werden eine neue Beschreibung speichern, also Aktion. Produktdaten. Beschreibung. Ich erwähnte jedoch, dass der Preis nicht bearbeitbar sein
sollte. Als Wert dafür werde ich den ursprünglichen Preis beibehalten. Geben Sie daher den Produktindex für Benutzerprodukte an. Preis hier.
Übrigens bedeutet das auch, dass unsere Handlung nicht ganz korrekt ist, da erwarte ich auch einen Preis, das sollte ich nicht tun, weil wir
ihn sowieso nicht in unsere Eingaben eingeben können, wir brauchen ihn nicht, also sollten wir nicht Erwarten Sie es hier, wir sollten es nicht als Teil
der Produktdaten für das Update des Produkts weiterleiten. Für ein neues Produkt benötigen wir es, aber für das Update nicht.
Damit haben wir unser aktualisiertes Produkt mit einigen neuen und einigen alten Daten, jetzt
müssen wir natürlich unseren Status aktualisieren und dafür haben wir die aktualisierten Benutzerprodukte, bei denen ich am Ende meine vorhandenen Benutzerprodukte mit dieser
Syntax kopiere Hier, um eine Kopie zu erstellen, und dann setze ich aktualisierte Benutzerprodukte für den ausgewählten Produktindex
gleich dem aktualisierten Produkt. Daher ersetze ich das Produkt in diesem Index durch das neue aktualisierte Produkt in meiner Kopie,
nicht im ursprünglichen Array, sondern in meiner Kopie. Ich muss dasselbe in den verfügbaren Produkten
tun, aber dort muss ich zuerst den Index finden, da dieser Index hier
nur für die Benutzerprodukte funktioniert. Der Index in den verfügbaren Produkten ist
sehr wahrscheinlich ein anderer, daher habe ich meinen zur Verfügung Produktindex hier, wenn Sie es so nennen
möchten, das im Allgemeinen dieselbe Auswahllogik hat, damit wir das kopieren können, aber
natürlich werde ich das verfügbare Produktarray anstelle des Benutzerproduktarrays untersuchen. Und jetzt können wir hier wieder die aktualisierten
verfügbaren Produkte haben, in die ich meine verfügbaren Produkte kopiere und dann aktualisierte verfügbare Produkte für
den angegebenen Produktindex gleich setze. Entschuldigen Sie, dass der verfügbare Produktindex natürlich gleich dem aktualisierten Produkt ist, so dass
Ich ersetze mein vorhandenes Produkt durch das aktualisierte Produkt sowohl in
den verfügbaren Produkten als auch im Benutzerprodukt-Array. Nun und jetzt müssen wir nur noch
unseren neuen Status zurückgeben, zuerst den vorhandenen kopieren und jetzt verfügbare Produkte gleich aktualisierten verfügbaren Produkten und Benutzerprodukte gleich
aktualisierten Benutzerprodukten setzen, also konfiguriere ich meine aktualisierten Arrays Dort. Damit haben wir hoffentlich die gesamte Logik, die wir benötigen. Lassen Sie uns
diese Ereignisse nun über den hinzugefügten Produktbildschirm auslösen. Hier müssen wir also Use Dispatch
aus React Redux importieren und unsere Aktionen importieren. Importieren Sie also alles als Produktaktionen aus
dem Speicherordner, dort aus dem Aktionsordner und dort aus der Produktdatei und versenden Sie diese Dinge
dann natürlich im Submit-Handler. Was wir versenden, hängt davon ab, ob wir amd
bearbeiten oder hinzufügen. Wie
bereits erwähnt, können wir mithilfe des bearbeiteten Produkts herausfinden, was der Fall ist. Wenn es festgelegt ist, bearbeiten
wir, wenn es nicht festgelegt ist, sind wir es Hinzufügen.
Hier im Submit-Handler können wir also ein if-Check hinzufügen und prüfen, ob das bearbeitete Produkt bearbeitet wurde. Wenn
dies
festgelegt ist, bearbeiten wir es. Daher möchte ich mein Update-Produktereignis auslösen, und zwar zunächst müssen diese
Versandfunktion mit Hilfe von use dispatch erstellen und jetzt mit der erstellten Funktion können wir dort unten Versandproduktaktionen aufrufen, um
das Produkt zu aktualisieren, da wir dies hier tun und jetzt alle
Daten weiterleiten, die wir hier
benötigen, nämlich meine Produkt-ID , das
ist die ID des Produkts, das wir bearbeiten, wir
extrahieren das hier oben und leiten natürlich auch den Titel, die Beschreibung, all diese Zustandskonstanten, die wir
hier haben, unsere imageUrl und nicht den Preis weiter, weil wir brauche das nicht und im anderen Fall bedeutet das, dass
wir hinzufügen, dann
möchte ich die Produktaktion versenden. Produkt erstellen, hier leiten
wir Titel, Beschreibung, imageUrl und auch den Preis weiter und damit sollten wir ein Setup haben,
in dem wir hoffentlich Produkte hinzufügen und bearbeiten können.
Speichern wir
das also und schauen wir es uns an. Wenn wir jetzt hier zum Admin-Bereich gehen und dies und ein
Ausrufezeichen hier und auch eines hier in der Beschreibung hinzufügen und auf Speichern klicken, erhalte ich undefiniert, ist kein Objekt, das
den Requisitenpreis als fest bewertet.
Es sieht also so aus, als hätte ich hier meinen Preis verloren, als ich versucht habe, dies zu aktualisieren.
Okay, bevor wir das beheben, wollen wir sehen, ob das Hinzufügen eines neuen Produkts überhaupt funktioniert.
Wenn ich hier ein Produkt mit Test hinzufüge, Test, der natürlich kein gültiges imageUrl ist, so dass
wir kein Bild sehen, aber zumindest an etwas nippen, ist dies auch ein Test.
Wenn wir dies versuchen und ich auf "Senden" drücke, funktioniert
dies auch nicht. Das Speichern des Preises funktioniert
also irgendwie nicht und ich denke, das Problem ist hier natürlich. Das Problem hier ist, dass der Preis hier tatsächlich
eine Zeichenfolge ist, aber eine sein sollte Nummer, so dass wir es leicht in eine Zahl
umwandeln können, indem wir hier ein Plus hinzufügen, bevor wir es übergeben, um ein Produkt zu erstellen. Wenn wir uns andererseits unseren Produktreduzierer ansehen, sollte es
normalerweise den Preis behalten, den es bereits hatte .
Mal sehen, ob das Plus das Hinzufügen behebt oder ob es auch ein anderes Problem gibt. Dies war eine Änderung, die sowieso erforderlich ist,
aber mal sehen, ob es ein anderes Problem gibt. Also teste, teste, zwölf, bitte gib
hier nur Zahlen ein, nicht irgendeinen Text, den du derzeit könnten, der aber brechen würde,
teste dies, drücke diesen Knopf, ja das sieht nicht schlecht aus, wir haben hier aber ein Problem mit dem Bild Wenn
wir nach unten scrollen, tatsächlich hier, wenn wir dies verwerfen, können wir sehen, dass hier unser Produkt
ist, sodass der Preis fehlt, also stimmt etwas nicht und
wir scheinen das Bild auch nicht richtig zu speichern, nicht
nur, weil es nicht angezeigt wird, sondern auch wegen
Diese Warnung haben wir bekommen, aber im
Allgemeinen funktioniert dies.
Wenn ich hier zum Beispiel versuche, dies zu aktualisieren und zu speichern, wird immer noch ein Fehler angezeigt,
sodass immer noch etwas nicht stimmt.
Eine Sache, die falsch ist, sind natürlich die Aktionen. Für das Update-Produkt hier sollte der Typ Update-Produkt sein und kein
Produkt erstellen. Andernfalls lösen wir
im Reduzierer die falsche Aktion aus, die den Preisfehler erklärt, den wir dort erhalten haben.
Dies muss also ein Update-Produkt sein, damit ein Produkt nicht überraschend aktualisiert werden kann.
Das ist also ein Problem, aber ein weiteres großes Problem kann im hinzugefügten Produktbildschirm gefunden werden. Ich verwende hier meine Rückrufmethode, um den
Submit-Handler richtig zu verpacken, und dies, um unnötige
Neuerstellungen der Funktionen zu vermeiden.
Das Problem ist, dass ich anfänglich festgelegt habe, dass ein leeres Array als Abhängigkeitsliste vorhanden ist, was bedeutet, dass dies
nie neu erstellt wird. Dies war sinnvoll, als wir uns nur bei der Konsole angemeldet
hatten, aber jetzt machen wir dort Dinge und jetzt haben wir tatsächlich Abhängigkeiten.
Im Moment erstelle ich diese Funktion nie neu, was bedeutet, dass sie nie für ihre aktualisierten Werte neu erstellt wird.
Wenn wir unser Formular abschicken, berücksichtigen wir niemals, was der Benutzer eingegeben hat.
Eigentlich müssen wir jetzt
hier Abhängigkeiten angeben, die Versandfunktion, aber vor allem sogar die Produkt-ID, den Titel, die Beschreibung und
die imageUrl und natürlich auch den Preis. Wenn wir dies speichern, sollte es uns gut gehen und alle Probleme
sollten verschwunden sein.
Warten wir also, bis
dies neu geladen wird. Gehen Sie jetzt zu admin und beginnen Sie möglicherweise mit der Bearbeitung. Wenn wir im Titel und in der Beschreibung
ein Ausrufezeichen einfügen und dieses speichern und zurückgehen, sehen wir dies hier und wenn wir zu Produkten gehen Wir sehen
es auch hier und im Detail sehen wir auch dieses Ausrufezeichen.
Wenn wir jetzt zum Administrator zurückkehren und ein neues
Produkt erstellen, testen, testen,
zwölf, testen Sie dies und ich speichere dies und ich gehe zurück, jetzt wird
dies auch dort unten angezeigt. Natürlich wird das Bild nicht angezeigt,
da wir keine gültige URL eingegeben haben, aber alle anderen Daten angezeigt werden. Dies
funktioniert also im Allgemeinen und natürlich können Sie eine gültige imageUrl eingeben,
und das würde auch kaputt gehen. Lassen Sie uns dies schnell testen auch. Kehren wir also zum Admin-Bereich zurück und fügen hier möglicherweise ein Regal hinzu. Dazu
habe ich die URL eines Regals ausgewählt, das ich im Internet für 199 gefunden habe. 99, das ist ein schönes
Regal wie dieses. Wenn wir dies jetzt speichern und zurückgehen, sieht das gut aus. Hier
ist unser Bild. Wir sehen das auch hier auf dem Produktbildschirm und können es auch hier anzeigen.
Das scheint also
zu funktionieren und damit haben wir im Allgemeinen ein Setup, das funktioniert.
Jetzt gibt es kleinere Dinge, an denen ich arbeiten möchte, zum Beispiel bevor wir löschen.
Es wäre schön, einen kleinen Bestätigungsdialog zu haben. Außerdem möchte ich sicherstellen, dass wir beim Hinzufügen oder Bearbeiten eines Produkts auf
Speichern klicken hier navigieren wir automatisch zurück.
Das sind natürlich nur Kleinigkeiten, aber ich denke, sie sorgen hier in diesem Modul für ein schönes Finale.