Vollständiger Leitfaden für das Redux-Toolkit mit React JS

1. Einführung: Hallo und willkommen zu diesem Kurs, in dem wir das moderne Redux-Konzept lernen werden. Das ist Rudolf-Toolkit mit religiösen, Mein Name ist Rachel und ich werde Ihre Ausbilderin in diesem Kurs sein. Wenn Sie also ein React-Entwickler sind, verwenden Sie das Derivat möglicherweise als Zustandsverwaltung für Ihre Anwendung, um den Anwendungsstatus aufrechtzuerhalten. Und Sie verwenden möglicherweise auch redact Zunge oder redact Saga Middleware, um Nebeneffekte in Ihrer Anwendung zu bewältigen. Vor kurzem hat das redact-Team den neuen Ansatz entwickelt, Logik effizienter zu schreiben , wenn sie ein Toolkit lesen. Und mit diesem Tool werden die Dinge viel einfacher. Ich dachte daran, einen neuen Kurs zu diesem Thema zu erstellen. Weil dieser Bereich die YDA-Toolkit-Bibliothek es uns ermöglicht, Redox auf viel einfachere und prägnante Weise zu implementieren als früher. Lassen Sie mich Ihnen nun denjenigen unter Ihnen, die nicht wissen, was es ist, den kurzen Überblick über Rudolf geben. Dieser Fehler ist die State Management Library die wir in unserer React-Anwendung verwenden, sowie die Sie in Ihrer Anwendung verwenden werden. Nicht nur bei React, sondern es ist sehr beliebt. Die React-Bibliothek, das ist der Überblick über den Reduct. Lasst uns also verstehen, was wir in diesem Kurs lernen werden. Zunächst beginnen wir mit einem theoretischen Konzept. Als würden wir versuchen, das Kernproblem von React zu verstehen und warum wir Redux in React verwenden. Dann werden wir verstehen, was ein Toolkit ist und was APA einschließlich dieser redakten Mautstelle gesagt hat, was ist eine Think Tank zu schaffen. All diese Konzepte werden wir also mit Hilfe der Pubertät verstehen. Danach werden wir beginnen, unsere Anwendung mit Hilfe des redact-Tools zu erstellen unsere Anwendung mit Hilfe des redact-Tools zu erstellen und einen Think Tank zu erstellen, in dem wir alle Crowd-Operationen mit Hilfe von JSON-Platzhalter-Fake durchführen alle Crowd-Operationen mit werden EPA. Mit dieser Anwendung lernen Sie , wie Sie diesen Beitrag PUT erstellen und mit create löschen, ich denke Middleware in Ihrer React redact Toolkit-Anwendung. Diese Anwendung werden wir in diesem Kurs mit Hilfe der reduzierten Mautstelle in React erstellen . Sprechen wir nun über die Grundvoraussetzung für diesen Kurs. Dieser Kurs ist so konzipiert, dass jeder an diesem Kurs teilnehmen kann , der daran interessiert ist, modernes Redox-Konzept zu erlernen . Sie müssen nur ein grundlegendes Verständnis von HTML, CSS, JavaScript sowie Reagieren Sie auf Basiswissen. Am Ende dieses Kurses haben Sie ein vollständiges Verständnis des Reduct-Toolkit-Konzepts. Und Sie können das redact Toolkit auch in Ihrem vorhandenen React-Projekt implementieren . Und Sie können auch das React Redux-Projekt konvertieren in dem der alte Redux-Code während Großbritannien in ein Leser-Tool könnte. Worauf warten Sie darauf, an diesem Kurs teilzunehmen , um all diese modernen Konzepte zu lernen? Und wenn Sie Fragen oder Vorschläge haben, können Sie sich jederzeit an mich wenden. Ich werde mein Bestes geben , um Ihre Abfrage zu lösen. Das war's also. Von meinem Ende sehe ich Sie im Kursbereich. 2. Was ist Redux und warum verwenden wir es?: In diesem Video werden wir zuerst das Kernproblem des React js Nachlassmanagements verstehen . Wir haben unsere Haupt-App-Komponente. Dann haben wir unsere Unterkomponente bekommen. Wenn wir einen Text ändern wollen, können wir dies nicht direkt tun. Stattdessen muss ich einen Elternteil informieren und den Text dort ändern. Und wenn ich eine zusätzliche Komponente bekomme, wird es noch komplexer. Deshalb haben wir eine Lektüre , von denen ein anderer Ansatz verfolgt wird. Also hier haben wir unsere Ansicht, unsere Anwendung, und in dieser Anwendung wird in einer bestimmten Komponente versandt und handeln. Dann Actionmarke durch den Reduzierstück. Reducer eher einfacher Job oder Aufgabe. Es wird eine Aktion ergreifen, dann wird es alle Manipulierten brauchen, und es wird einen neuen Staat geben. Diese Manipulation wird passieren, backen Sie auf dem Unveränderlichen. Das bedeutet, dass es den alten Vektor nicht ändert. Es wird die gesamte Strecke als Grundlage nehmen und dann eine brandneue Kopie aller abgebildeten Elemente erstellen , die mit den Änderungen in der Ploidie unberührt geblieben sind. Wir schaffen einfach einen neuen Aufhebung und geben diesen neuen Zustand zurück. Dies unveränderlich gibt Ihnen einen eindeutigen Status in Ihrer Anwendung. Jetzt bekommen wir einen neuen Zustand, der reduziert werden kann dann wird er in einem Geschäft gespeichert. Und wir werden nur ein Geschäft in unserer Anwendung haben. Dieser Vektor hat eine einfache Aufgabe, in Richtung unseres Staates zu drängen. Deshalb heißt es Restore. Möglicherweise haben Sie einen Mehrfachreduzierer, aber wir haben nur einen, der in unserer Anwendung gespeichert ist. Dann abonnieren Sie unsere Anwendung diesen Shop. Wann immer es veraltet ist, werde aktualisiert. Neuer State Park im Laden. Der Store sendet es automatisch an die gesamte Komponente und wird weitergeleitet, und die Anwendung wird aktualisiert. wir nun zum vorherigen Beispiel zurück, in dem wir unsere App-Komponente mit anderen Komponenten hatten. Und jetzt haben wir auch ein Geschäft. Wenn wir nun etwas ändern wollten, die Benutzerkomponente von MainComponent, dann werden wir versenden und handeln. Dann führt der Staat es ein. Und dann liegt uns der Weg allen Komponenten in diesen Daten am Herzen , was reduziert ist und warum wir Redux in React js verwenden. 3. Was ist Redux Toolkit ?: Lassen Sie uns nun verstehen, was der gesamte Create Reader zu liquidieren ist , der auch für die Verwaltung von Anwendungen verwendet wird, wenn 13 eine React-Anwendung auf effiziente Weise ist. Es hat einige Batterien im Lieferumfang enthalten Toolset für eine effiziente Entwicklung. Diese Batterien enthalten Toolset Begriff, sehen hier ein bisschen schick aus, aber Sie werden diesen Begriff später verstehen. Root x war also bereits eine beliebte Option für die Zustandsverwaltung in unserer React-Anwendung. Warum ist dann redact Toolkit erforderlich? Mit dem redact Toolkit war so viel Code erforderlich, um diese grundlegende Ebene zu optimieren, und damit zu viel Boilerplate-Code , der unseren Code macht, lassen Sie ihn effizient reinigen. Außerdem müssen zu viele Pakete installiert werden, um eine skalierbare Anwendung zu erstellen. Mit traditionellem Redox haben wir früher Action und Reducer in einer separaten Datei geschrieben . Und das wird komplexer, wenn unsere App Sie dazu bringt, diese Herausforderung anzugehen , ein Leser-Toolkit entwickelt hat. Redact Toolkit ist ein besserer Ansatz um Logik loszuwerden. Insgesamt sieht der Leser gut aus, wenn Zeitraum der Entwicklung durch Beseitigung von Courbet redact Toolkit Paket, von sie glauben , dass sie gefüllt sind, um eine Leseranwendung zu erstellen. Redact Toolkit ermöglicht es Entwicklern, einfachen, sauberen Redux-Code zu schreiben . Hier geht es also um redact Toolkit und warum wir es mit React verwenden. Ich hoffe, du verstehst diesen ausgefallenen Begriff jetzt, der ein Batterie-Toolset ist. Hier dreht sich also alles um Toolkit. Lasst uns nun verstehen, dass dieser Leser mit einem grundlegenden Szenario gut aussieht . Angenommen, wir müssen eine Kontaktanwendung erstellen. Wir müssen es schaffen, dass es immer noch fünf ist. Ich zeige Ihnen die traditionelle Herangehensweise mit traditionellem Reduzieren. Also lesen wir normalerweise Reducer und Unfall in einer separaten Datei. Wie Sie sehen können, haben wir hier x und dot js, in denen wir zwei x Zehn haben zu erhöhen oder den Zählerwert zu dekrementieren und eine Dot-JS-Datei einzuführen, haben wir eine Logik, um eine Zählerwert oder dekrementieren Sie den Zählerwert des Theta. Traditionell schwärzt. Angenommen, lassen Sie uns jetzt sehen, wie wir mit dem Leser umgehen, um gut auszusehen. Im redact Tool könnten wir unseren Reduzierer und unsere Aktion in derselben Datei umschreiben . Sie können sehen, dass wir unsere Aktion bei Reducer unter dem Create Slice durch den Toolkit-Ansatz geschrieben haben unsere Aktion bei Reducer unter dem . Und Sie können den Code viel mehr Konzept machen indem Sie create verwenden. Sowohl der Reduzierer als auch ich können so unter dem Live geschrieben werden, indem man diesen Code sieht, ein Raster damit definiert und die Aktion sauberer wird. Es sind Daten zu schauen. Die Switch-Anweisung muss nicht mehr verwendet werden, um die Aktion mit dem entsprechenden Hersteller zu verwalten. Und noch eine Sache, die Sie hier vielleicht bemerkt haben, wie wir den Wert in der Reducer-Funktion direkt mutiert haben, anstatt einen neuen zu aktualisierenden Wert zurückzugeben. Dies geschah tatsächlich, weil das Redigt-Tool die Bibliothek verwenden konnte , die es ermöglicht , das Mutieren logischerweise zu reduzieren. Hier dreht sich alles um das Reader-Toolkit mit dem Basisszenario. 4. Redux-Toolkit API verstehen: Reden wir jetzt über dieses Ruder zu lukrativ. Dazu gehört das Halten dieser API im Radar-Toolkit-Paket. Beginnen wir mit dem ersten, das konfiguriert ist, um unser kreatives Tool so einzurichten , dass es eine vereinfachte Konfigurationsoption und einen guten Standard bietet. Es kann Ihren Dias Reducer automatisch kombinieren und Sie können jede Middleware, was immer Sie wollen, mit redact liefern . Cool, gut, Riddance, danke standardmäßig enthalten. Und es ermöglichte auch das Delta des Benutzerlesers f mal. Und es ist nicht notwendig , Code zu schreiben, um die Reduzierung des Entwicklungstools mit dem Reduct Toolkit-Paket zu konfigurieren . Sie müssen also nur die Data Dev-Tools in Ihrem Chrome Roger installieren , die Reduct-Tabelle arbeitet automatisch mit der Reduct-Tabelle. Gutes Paket. Hier geht es also um den konfigurierten Store. Sprechen wir nun über Disk erstellen Sie den Reduzierer. Grundsätzlich vereinfacht es das Schreiben unserer Reducer-Reducer-Funktionslogik, da es die IMRT-Bibliothek intern verwendet, um ihren Zustand zu aktualisieren, indem er neuen abgeleiteten Code in Ihren Reducer und Support schreibt neuen abgeleiteten Code in Ihren Reducer und Support direkte Zuordnung ist eine spezifische x Anti-Reducer-Funktion , die den Status aktualisiert , wenn die Aktion zerstreut wird. Geben Sie eine Nachschlagetabelle des Aktionstyps an, um die Reducer-Funktion zu erstellen , anstatt die Switch-Case-Anweisung zu schreiben. Lasst uns nun weitermachen und über die Create-Aktion sprechen. Schaffen Sie Spannung mit fahrlässiger geschriebener Action Creator Funktion für das gegebene Tag mit Getränk. Und es kann auch an einem Ort der Typkonstante verwendet werden. Sprechen wir jetzt darüber. Erstellen, wählen Sie, Erstellen Sie Azure-Funktion aus, die einen Anfangsstatus und ein Objekt eines Reducer-Funktionsnamens akzeptiert . Dann generiert es automatisch ein X und erstellt und wirkt und Typ, die dem Reduzierstück entsprechen. Und insgesamt entstehen dadurch Folien. Apa ist der Standardansatz für das Schreiben unserer Redux-Logik. Lasst uns jetzt weitermachen und über das kreative Ding sprechen. Dreh dich, um zu erschaffen, glaube ich. Danke. Wird verwendet, um asynchrone Aufgaben mit dem Reduct Toolkit-Paket auszuführen. Diese Funktion akzeptierte normalerweise drei Parameter. Der erste Parameter ist x und type, der in einem Ring sein wird. Der zweite Parameter die Funktion, die einen vom Versprechen generierten Daumen zurückgibt einen vom Versprechen generierten Daumen , der entweder ausstehende, erfüllte oder abgelehnte Aktionstyp-Gürtel für dieses Versprechen zerstreut . Und der dritte Parameter wird das Optionsobjekt sein. Sprechen wir nun über diesen Create Entity Adapter, generieren Sie einen Satz wiederverwendbarer Reduzierer und wählen Sie aus, um die normalisierten Daten bei der Wiederherstellung zu verwalten. Hier geht es um das Reduct-Toolkit, einen BA, und wir werden mehr über diese API erfahren , wie Folie erstellen, einen Think Tank erstellen, eine Tour im Detail konfigurieren. 1 Fünftel, beginnen Sie im nächsten Abschnitt mit der Erstellung unserer Anwendung. 5. Erstelle einen vernichten: Lasst uns nun dieses kreative Denken verstehen. Intuitiv Wann immer wir eine Aufgabe ausführen müssen, verwenden wir Middleware. Middleware könnte alles sein. Es könnte entweder ein Reduktionsmittel oder eine Reduct-Saga um asynchrone Aufgaben auszuführen und Middleware abzuziehen, entweder beliebtes Paket mit dem Reader mit redact Toolkit, Reduktionsmittel ist standardmäßig enthalten, Erstellern ermöglichen, asynchrone Logik auszuführen , bevor das Prozessergebnis an den Reduzierer gesendet wird. Hier haben wir unseren Beispielcode und ich gebe Ihnen einen kurzen Überblick über diesen Beispielcode. Jetzt werde ich zuerst darüber sprechen, Folien erstellen. So geringfügig die Funktion , die Ihren Code und Ihre Reduzierfunktion enthält , mit der Sie eine Store-Daten ändern. Insgesamt erstellt es also als Dritter Live-API. Wir schreiben unsere Leserlogik. Hier können Sie also sehen, dass wir eine Namenseigenschaft haben, also sind dies blitzschnell nichts als Ihre Ziffern. Wir müssen jetzt eine Folie bereitstellen , die Sklaven erstellt. Dann müssen wir den Ausgangszustand bereitstellen. Hier definieren wir unseren Ausgangszustand für unsere Bewerbung. Hier können Sie also sehen , dass wir anfänglich statusähnliche Entitäten haben und falsch geladen werden. Jetzt haben wir hier ein Reduzierobjekt. In diesem Objekt. Wir haben synchrone Anfragen bearbeitet , die zum Geschäft führen können. Jetzt haben wir Aktivitäten , die extra reduziert sind. Wir gehen asynchron um, was unser Min. Okay, also denke ich, Ronnie hat mit dem Erstellen erstellt , denke ich zehn Schritt drei Parameter. Der erste Parameter ist das X und die Art des Getränks, und der zweite Parameter wird eine Funktion sein , die ein Versprechen zurückgibt und eine Zunge generiert, die die gesamte Säule zurückgewiesener Aktionstyp aussendet auf dieses Versprechen. Und das dritte wird das Optionsobjekt sein. Individuell mit Italien haben wir eine andere, andere Konfiguration zur Erstellung einer Think-Tank-API zur Verfügung gestellt . Aber der dritte Parameter, Wirkstoffsauerstoff hier. Wann immer diese Aktion, guter Versand von einer Komponente innerhalb unserer Anwendung. So erstellen Sie alles kann einen Lebenszyklus mit drei Versprechen erzeugen einen Lebenszyklus mit drei Versprechen , indem Sie denselben String-Typ wie ein Präfix verwenden. Hier können Sie also sehen, dass es kein ausstehendes erfülltes, niedergeschlagenes generiert . Und diesen ganzen Lebenszyklus haben wir in unserem zusätzlichen Reduzierstück verfügbar. Alle drei versprechenden Lebenszyklus, die durch die Erstellung von zehn erzeugt werden, werden tatsächlich unseren Reduzierer bewerten. Was also beim ersten Anruf passiert , erstellt einen Think Tank, wird diesen Aktionstyp ausliefern, okay, und das steht noch aus. Und dann werden wir unsere Nutzlast erstellen lassen, die ausgeführt wird, um entweder ein Ergebnis oder einen Fehler zurückzugeben. Im Fehlerfall, create, ich denke, dann werden wir eine Aktion mit dem Redigierten aussenden. Wenn unser Datensatz erfolgreich ist, wird durch Erstellen von zehn diesen Aktionstyp, der erfüllt ist, zerstreut. Und alle drei Parameter Lebenszyklus, werden wir innerhalb dieser zusätzlichen Reduzierung unser Objekt bewerten , wo wir unsere gewünschten Änderungen am Geschäft vornehmen . Hier dreht sich alles um das kreative Ding. 6. Projektaufbau: Okay, in diesem Projekt werden wir die gefälschte API des JSON-Platzhalters verwenden , um unseren Kreditantrag mit Hilfe von Reduct Toolkit zu erstellen und alles zu erstellen. Also werden wir diese API verwenden, wie zum Beispiel den Beitrag basierend auf der ID zu erhalten. Wir werden diese API verwenden, um einen einzigen Blogbeitrag zu erstellen. Und wir werden auch diese gefälschte API verwenden. Aktualisieren Sie einen einzelnen Port und basierend auf der ID und bei Schwarz werden wir DCPA verwenden, werden wir DCPA verwenden um einen einzelnen Port basierend auf der ID zu löschen. Insgesamt werden wir für einen PI mit Reduct Toolkit in diesem Projekt verwenden . Lassen Sie uns zuerst unser Projekt einrichten. Ich bin in diesem Verzeichnis und öffne eine Eingabeaufforderung. Ich erstelle ein React-Projekt. Sei es reagiere. Apa. Du kannst jeden Namen nennen, was immer du willst. Lassen Sie uns dieses Projekt erstellen. Es dauert also etwa zwei bis drei Minuten , um die gesamte NO3-Abhängigkeit zu installieren. Und ich komme mit den ganzen Prozessen zurück. Gut abgeschlossen, führen Sie unser Projekt-Setup jetzt abgeschlossen. Aber lasst uns zuerst in dieses Verzeichnis gehen, das korrekt ist. Apa-Toolkit. Bevor wir also npm starten, wollte ich einige Pakete für dieses Projekt installieren. Also werde ich solche Pakete installieren. Wir werden also verwenden und entwerfen, um unsere Komponente zu bauen. Dann müssen wir ein reduktives Toolkit installieren. Letztes Toolkit. Und wir brauchen auch React Router. Nur drei Pakete. Ist es für dieses Projekt erforderlich? Lasst uns also all diese Pakete installieren. In der Zwischenzeit werde ich dieses Projekt in Visual Studio-Code öffnen . Leute, es hat so ausgesehen, als wären alle Pakete installiert und ich habe dieses Projekt bereits in meinem Visual Studio-Code geöffnet . Gehen wir also in den VS-Code ein. Wie Sie sehen können, ist dieses Projekt in meinem VS-Code geöffnet. Und hier haben wir Slide verpackt. Hier haben wir ein Paket wie und gestalten das redact Tool Kirtan, React Router down, Guys, um die Komponente in unserem React-Projekt zu verwenden und On-Demand-Komponente zu verwenden. Zuerst müssen wir die Ameise- und Design-CSS-Datei mitbringen um die Android-Designkomponente in diesem Reaktor verwenden zu können . Also bringe ich einfach die Antidepressiva, CSS Akte. Eine CSS-Datei, die wir aus unseren Antikörpern mitnehmen müssen und dann können wir nur die antidepressive Komponente verwenden. 7. Strukturierung von unserer App: Jetzt werden wir unser Projekt strukturieren. Ich werde hier nur einige Ordner erstellen, als würden wir uns wie ein Benutzer einen Ordner Bit heterodox entfaltet haben . Lassen Sie uns zuerst eine Route verdaut haben. Ich werde haben und das ist eine Dot-JS-Datei. Erstellen Sie eine Post-Punkt JS-Datei. Wir werden noch eine Datei haben, die Guard Dot JS-Datei lädt . Um den Skelettlader zu zeigen. Wir haben diese Datei erstellt. Generieren wir nun ein Snippet. Zuerst. Wir haben diese Datei erstellen, posten Sie diese index.js Datei. Wir werden in die Pose passen. Wir können den Dichter aktualisieren und wir können den Beitrag löschen. All diese Dinge werden wir in dieser Datei index.js tun. Erzeuge es in ein bisschen. Lassen Sie uns hier nur die JS-Datei bewohnen. Entfernen wir dieses eine Logo, das wir nicht verwenden werden. Lasst uns den ganzen Teil entfernen. Wir werden von React Router Switch Routen und Routen mitbringen . Von React Router nach unten. Wir werden Routen mitbringen. Wir brauchen Router Router des Routers. Grundsätzlich werden wir dies für die Route registrieren. Das ist eine Indexpunkt-JS-Datei erstellen, okay? Dies wird nicht die Datei index.js sein. Lassen Sie uns gleich hier nur wie zu Hause geben, Routen. Hier verwenden wir React Rotterdam vergence sechs. Das siehst du. Deshalb benutze ich hier nicht so sehr Routen. Ich hoffe, Sie sind sich dieser Änderungen in Bezug auf die neueste Version des React Routers genau hier unten auch nicht bewusst die neueste Version des React Routers . So können wir einfach den Pfadstatus der Komponente beibehalten. Wir werden das Element zum ersten Mal verwenden es zur Home-Route-Stunde ablehnen. Die nächste Route. Wir werden wie erstellen, erstellen haben . Beides. Was auch immer das Gedicht, das Sie erstellen werden , wird nicht auf benachbarten Server gespeichert da das Ethyl ein fester Server ist. Also hier ahmen wir nur die, alle Anfragen wie get, put, post und delete nach. Sie konnten keine Daten speichern. In dB. Wir haben Dish to route abgelehnt und lassen uns auch Browser-Router mögen. Lassen Sie uns diesen gesamten App-Browser-Router sirup. Lasst uns das entfernen. Lasst uns zuerst vor Ort beginnen. Fangen wir an. Warten wir nun, bis die Anwendung in den Browser geladen wird. Leute, die Replikation wird in den Browser geladen. Lasst uns diese Route besuchen. Bush auch, ob es funktioniert oder nicht. Dies ist auch Register. Wir haben unsere beiden Strecken erfolgreich registriert. 8. Gestalte an Form: Jetzt beginne ich mit dem Abrufen des Porsche basierend auf der ID fünfmal erstelle ein Eingabefeld und die Schaltfläche, zwei Schaltflächen. Ich fange an, von dieser Datei aus zu arbeiten. Aber wir müssen jetzt tun, um einige Komponenten aus unserem Design zu holen . Bringen wir diese Komponenten zuerst. Die Komponente, die wir bringen werden Button, Karte, Eingaberaum. Reagieren Sie bei der IT, um Benutzerdaten zu bringen und Wirkung zu verwenden. Da müssen wir die Port-ID fertigstellen. Wir müssen also einen Status mit ID definieren. Id. Id. Lassen Sie uns Ihnen ein wie Sie gerade zurückgekehrt sind. Wir müssen eine Klasse definieren, Breitencontainer. Und danach werden wir eine Überschrift haben. Im Grunde führen wir den Stil des Phage Post-Skriptes , Inline-Stil, aus. Jetzt, nach dieser Überschrift, haben wir ein Eingabefeld mit Platzhalter, wie Benutzer-ID. Mit JSON-Server. Grundsätzlich werden wir jede zufällige ID übergeben und wir erhalten einen Beitrag wie Titel und Körpertyp wird die Zahl bei der Änderung sein , die wir geben werden. Wir können einfach wie Set machen. Es wird für den Fall einen Punkt-Zielpunktwert haben. Jetzt müssen wir auch den Wert übergeben. Also haben wir einen Ausweis. Wir können etwas Kacheln für dieses Eingabefeld geben, Breite, leider 300 Pixel. Jetzt können wir hier ein paar Atemzüge machen. Lasst uns den Atem anhalten. Jetzt haben wir ein Leerzeichen, eine Raumkomponente, die wir verwenden werden. Denn weil wir zwei Knöpfe kombinieren werden , lassen Sie uns die Seiten behalten. Es wird klein sein. Lassen Sie uns einen Liner-Stil geben. Ich werde nur die Gesamtmarge geben. Füge das hinzu. Wir werden unseren Button haben, unseren Design-Button. Dieser Button wird primär sein. Wir können den Button Lamelech geben, den Sie dann, sobald der Benutzer die ID im Eingabefeld angegeben hat, diesen Beitrag ausfüllen können. Danach, was wir tun müssen, werden wir noch einen Knopf haben. Diese Schaltfläche ist im Wesentlichen für die Erstellung eines Benutzers verantwortlich. Dieser Button navigiert Sie im Grunde zu dem Create für das wir hier erstellt haben. Wir haben zwei Schaltflächen und wir werden eine onclick-Methode haben. Wir können dir einen Fink geben, ihre Beiträge benutzen. Definieren wir diesen riesigen AT-Port. Sonst werden wir einen Fehler bekommen. Wir haben diese Funktion definiert. Diese Funktion werden wir versenden, okay? Und Action. Wir haben diese Funktion definiert, in der wir versenden und handeln werden. Gehen wir also zuerst in den Browser. Wir haben dieses Eingabefeld und müssen auch die Navigationsfunktion für diese Schaltfläche aktivieren . Was wir also vom Reaktor abwärts tun können, können wir den Gebrauch und navigieren. Also müssen wir die USA zum Navigieren bringen. Jetzt müssen wir die Referenz abspeichern. Sie verwenden die Variable navigieren und navigieren. Navigieren Sie. Was wir hier tun können. Auf Klick. Wir können einfach navigieren, um Posts zu erstellen. Mal sehen wir uns Details an, die wir uns bereits registriert haben. Ja, das ist die gleiche Route , die wir hier erwähnt haben. Gehen wir in den Browser. Aktualisieren. Klicken Sie auf Zukünftige Beiträge erstellen. Jetzt sind wir in der Lage, zu create post zu navigieren. Tippen wir hier was ein. Es akzeptiert nur die Nummer. Das können wir auch tippen. Als Nächstes werden wir das redact Toolkit in unserem Projekt einrichten. 9. Konfiguration und Verfassen VON GET mit createAsyncThunk: Hier haben wir den Ordner bereits erstellt. Hier müssen wir einen weiteren ordnerähnlichen Features erstellen. Da wir es jetzt mit dem Dichter zu tun haben, werden wir dir Leben wie beide Folien geben, nicht im Stamm des Reduct-Ordners. Wir werden unsere Wiederherstellungspunkt-JS-Datei haben. Stellen Sie sicher, dass es nicht im Router schwärzen sollte. Also denke ich, dass es stattdessen die Zukunft geschaffen wurde. Löschen wir diesen also und stellen Sie sicher, dass sich die Datei innerhalb dieses Redukts befinden sollte , denn die Speicherpunkt-JS-Datei ist. Speichern Sie die Dot-JS-Datei. Jetzt haben wir in unserem Ordner, zuerst werden wir eine Redox-Reaktion mit Redox-Toolkit schreiben um den Beitrag basierend auf der ID zu füllen , indem wir einen Think Tank erstellen. In Beiträgen schneiden Sie mit Italien schieben Sie mit nichts als einer Sammlung reduzierter diese Logik. In Folien mit Italien aktualisieren wir den Zustand unserer Komponente mit Hilfe des Herstellers. Also müssen wir aus dem Toolkit mitbringen, Slice erstellen und Async erstellen, Slice erstellen, alles erstellen. Danach, was wir mit der Erstellung eines Think Tanks zu tun haben , werden wir eine API-Anfrage stellen. Wie Sie bereits wissen , ist ein Tango standardmäßig im redact Toolkit enthalten. Richten Sie einen Think-Tank aus, um eine Verzögerung durchzuführen , indem Sie einen Think Tank erstellen, wir werden eine API-Anfrage stellen. Insgesamt wird ein Think Tank erstellen für die asynchrone Logik verwendet , bevor das Prozessergebnis an das Reduzierstück gesendet wird. Lassen Sie uns also unsere erste Aktion mit der Schaffung von Exportkosten erstellen. Posten. Erstellen Sie danach einen Think Tank. Im ersten Parameter werden wir unseren Aktionstyp übergeben. Sie können auf diese Weise weitergeben, posten und posten. Der zweite Parameter ist die Callback-Funktion, die dafür verantwortlich ist, die API erforderlich zu machen. Und der dritte ist optional. Es wird das Container-Option-Objekt sein. Also hier schreiben wir unsere asynchrone Logik. Wir erhalten eine ID von unseren Komponenten, damit wir die Idee so ablenken können. Danach können wir eine Rückkehr vornehmen und wir werden den Fisch verwenden, um eine API-Anfrage zu stellen. Wir werden diese API zuerst verwenden. Wir werden den Port basierend auf der ID bekommen. Wir können das einfach kopieren. Wir können es hier einpassen. Wir verwenden Back Tick weil wir das Datum auf dem Ausweis erhalten. Hier haben wir zwei Parteien ID. Dann werden wir eine Antwort geben. Dieser Antwortpunkt JSON. Erstelle jetzt einen Think Tank, im Grunde was er tut. Also wann immer wir diese Aktion versenden, die konkret ist, gießen Sie aus unserer Komponente. Dies schafft einen Think Tank, regenerative Versprechen Lebenszyklus. Der Versprechenslebenszyklus ist wie ausstehend, erfüllt und abgelehnt. Und wir werden diese drei Versprechen Lifecycle in After Reducer bewerten , wo wir unsere gewünschten Änderungen am Distalen vornehmen können. Lassen Sie uns zuerst ein Slice erstellen. Sport. Kosten. Slice wird aufgerufen, um Folien zu erstellen. Wir definieren den Slice-Namen. Also lass uns deinen Beitrag geben. Okay. Wir werden den ersten Stand unserer Bewerbung haben. Also werde ich den Beitrag mit Empathiebereich definieren. Dann werden wir das Laden falsch haben. Dann wird der Fehler null sein. Okay? Vorerst ist dieser Ausgangszustand für unsere Bewerbung erforderlich. Jetzt werden wir unseren zusätzlichen Reduzierer haben, dem wir den Lebenszyklus der drei Versprechungen bewältigen werden , der durch unsere Schaffung eines Think Tank-Reduzierstücks erzeugt wird . Und im Inneren werden wir einen guten Post-Punkt haben, einen guten Post-Punkt noch aussteht und dann erfüllt wird, und das hat gehandelt. Dann werden wir staatliche Maßnahmen haben. Hier. Wir werden den Zustand haben, dass die Punktbelastung im Falle des Biegens zutrifft, Beladung wird wahr sein. Ebenso werden wir den Lebenszyklus erfüllt haben. Also GET Post Dot erfüllt. Staatliche Aktion. Hier können wir einfach so tun, wie das Hochladen des staatlichen Gesetzes auf false gesetzt wird. Jetzt haben wir die Daten bekommen und wir müssen den Ladezustand falsch machen. Okay, jetzt state.org. Jetzt müssen wir den Ausgangszustand von beiden greifbaren aktualisieren den Ausgangszustand von beiden greifbaren damit wir einfach wie Action-Punkt-Nutzlast schreiben können. Danach werden wir haben, dass es gehandelt wird, gepostet zu werden. Gewählt. Staatliche Aktion. In diesem Fall wird auch das Laden der Puls sein. Was haben wir danach einen Total-State-Punktfehler. Hier können wir ähnliche Action-Punkt-Nutzlast angeben. Hier. Müssen wir Semikolon verwenden? Semikolon. Vergiss nicht , Semikolon zu verwenden. Formatieren wir das hier. Jetzt müssen wir diesen tatsächlich exportieren, Standard exportieren, Post-Folien-Dot-Reducer. Also haben wir unsere erste Aktion geschrieben. Jetzt ist es an der Zeit, die Logik in unsere Store-Punkt-JS-Datei mit dem Reader-Toolkit zu schreiben . Konfiguration von siegreich. Ganz einfach. Also müssen wir einen Shop aus unserem redact Toolkit mitbringen und konfigurieren. Von redact, total gut, um configure if torr zu bringen. Jetzt müssen wir unsere Reduzierstücke mitbringen, Reduzierstück . Unsere zukünftige Mappe. Das sind vier Folien. Exportieren, Standard, hat einen Store konfiguriert. Hier werden wir Reducer App haben. Wir werden den Schlüssel für diesen Porträtreduzierer bereitstellen . Mit Hilfe dieses App-Schlüssels werden wir den Status akzeptieren, den wir in unserem Slice definiert haben , um auf diesen Fehler in unserer Komponente zuzugreifen. Deshalb habe ich diesen App-Schlüssel definiert. Wir sind mit der Konfiguration des Ladens fertig. Gehen wir nun zur Datei index.js und fünf Minuten, um ein Paket wie reagierter Index zu bringen , weil wir eine Bereitstellung benötigen damit ich diese Tür zu unserem React ziehen kann Anwendung, groß React Redux. Und ich habe vergessen, dieses Paket zunächst zu installieren. Lassen Sie uns Pakete installieren ist groß lang. Schließen wir dieses Terminal. Zuerst heften Sie es an, um Anbieter aus unseren Reaktorprodukten zu bringen , die unsere Komponente nach dem Zustand haben, den wir in unserem restaurierten Zustand definiert haben. Und wir müssen seine Tour aus unserem Redox-Ordner mitbringen. Okay, jetzt werden wir unsere App-Komponente mit dem Provider umwickeln. Schneiden wir das aus, fügen Sie es hier ein. Wir können Datastore benutzen und wir können speichern. Sie können diesen auch überprüfen, ob Sie das redact Toolkit erfolgreich in die React-Anwendung integriert haben redact Toolkit erfolgreich in die React-Anwendung integriert oder nicht. Sie können zum Browser gehen und dieses Tool einfach öffnen. Ich füge mich an meinen Button an. Und hier siehst du den Staat. Das bedeutet, dass wir unser Toolkit erfolgreich in einem React-Projekt konfiguriert haben. 10. Verschieben: Jetzt müssen wir diese Aktion, die wir in unseren Beitragsfolien aus unserer Komponente erstellt haben, grundsätzlich aussenden die wir in unseren Beitragsfolien aus unserer Komponente erstellt haben . Okay, lass uns zur Datei index.js gehen. Und davon müssen wir einen riesigen Versand bringen, und Sie haben ausgewählt, dass Sie respektieren müssen, wird verwendet , um eine Klage zu senden. Sie haben ausgewählt, um den Bundesstaat aus unserem Shop auszuwählen. Lassen Sie uns zunächst die Referenz der Verwendung der Dispatch-, Versandvariablen speichern . Dann können wir nur eine Aktion aussenden. Hier. Zuerst werden wir prüfen, ob Sie keinen Ausweis haben. Wir haben eine einfache Fehlermethode wie Window Dot Alert gekauft . Wir können uns einfach wie geben, bitte geben Sie einen ID-Teil an, den wir zerstreuen und handeln werden , den wir in unserem Beitrag erstellt haben. Post- und VS-Code importieren diese Aktion automatisch. Und wir können hier passieren, mir hat das gefallen, weil Sie die ID sehen können , die wir hier in Form eines Objekts erhalten. So können wir den Ausweis auf diese Weise weitergeben. Danach können wir einfach noch eine Sache machen, wie ID setzen, um zu unterhalten. Lassen Sie uns zunächst anhand der zufälligen ID prüfen, ob wir gestochen werden oder nicht. Lassen Sie mich diese 1 zuerst auffrischen. Und lass uns einen Ausweis geben. Klicken wir auf Fetch forth. Lassen Sie uns nun sehen, wie die Tiefe sinkt. Sie können sehen, dass dieses Versprechen hier erfüllt wurde. Okay? Hier haben wir 1 Viertel im Array von Objekt. Jetzt kannst du sehen, dass wir diesen Beitrag haben, okay? Jetzt müssen wir diesen Port grundsätzlich in unserer Benutzeroberfläche anzeigen. Also lasst uns das machen. Jetzt müssen wir den Staat im Grunde genommen aus unserem Geschäft extrahieren , indem wir die ausgewählten USA verwenden. Sie können Ihren Use-Selektor verwenden. Wir können dein leichtestes tun lassen. Wir können die State-Dot-App verteilen , da unser Reduzierstück mit dem App-Schlüssel wiederhergestellt wird. Mit Hilfe des App-Schlüssels können wir also auf den Status zugreifen , den wir in unserem Vektor haben. Wir haben einen Zustand wie Loading definiert. Okay? Posten Sie diese Zustände, die wir in unserem Reducer in Folien definiert haben. Lassen Sie uns zuerst den Postdoc konsolenprotokollieren, ob wir den Beitrag erhalten oder nicht, Konsolenprotokollpost. Gehen wir in den Browser. Geben wir eine beliebige Benutzer-ID an. Öffnen wir nun die Konsole. Du siehst, dass wir einen Bereich haben. Es wird immer ein einzelnes Array von Objekten enthalten , da wir den Beitrag basierend auf der ID abrufen. Jetzt werden wir dieses Beitragsdetail in einer Kartenkomponente anzeigen . Zuerst lege ich hier etwas Code in die Ladekurve ein. Okay, also zeigen wir im Grunde Character Loader. Das Laden ist wahr. Sobald es geladen wird, zeigen wir diese Daten in einer Kartenkomponente an. Und ich werde hier Code für Skelettlader bezahlen. Und keine Sorge, ich werde diesen Code in dieser Vorlesung beifügen. Sie können diesen Code für diese Floating-Kurve leicht herausfinden . Was wir jetzt tun müssen, haben wir den Ladezustand. Nachdem diese Seite ist, werde ich ein paar Brief geben. Dann können wir unseren Ladezustand haben. Und wenn das Laden wahr ist , zeige ich in diesem Fall die Character Loader-Ladekarte an. Cvs legen diese Komponente automatisch importieren. Wir können die Zählung zu eins geben. Und in diesem Teil werden wir das Portdetail in einer Kartenkomponente zeigen . Hier benutze ich Fragment. Und wir werden einen Klassennamen verwenden, der heißt, und Design-Klassenname, Karte, Bindestrich-Wrapper. Und danach, was wir tun müssen, benutze ich hier die Karte. Auto, gib einen Titel ein. Wir können einen Titel so sortieren. Es wird immer ein einzelnes Array von Objekten enthalten. So können wir so für den Punkttitel anzeigen. Auf diese Weise können wir es zeigen. Wir können eine bessere Benutzer-ID als echte Benutzer-ID beibringen. Benutzer-ID und Post-Punkt-ID. Okay, lasst uns zuerst das überprüfen , ob wir etwas sehen können oder nicht. Gehen wir in den Browser. Und jetzt können Sie sehen, dass wir diese ID sehen können . Wir bekommen einen Fehler. Die Eigenschaft von title kann nicht gelesen werden. Okay, kein Problem. Um dieses Problem zu beheben, was wir tun können, können wir hier einfach wie die Punktlänge überprüfen. Länge des Punktes Dies ist größer als 0. Dann werden wir nur diese Kartenkomponente anzeigen. Lassen Sie uns das ausschneiden. Hier. Gehen wir in den Browser und aktualisieren Sie diesen. Lassen Sie uns nun eine zufällige Benutzer-ID angeben. Jetzt können Sie sehen, dass wir unseren Beitrag hier haben. Dies ist der Titel und dies ist die ID. Jetzt müssen wir auch den Körper zeigen. Sie können also sehen, dass es einen Titel hat , den wir hier bereits anzeigen , und wir müssen auch den Körper und diese Kartenkomponente anzeigen. Also was wir tun können, damit du hier ein Span-Tag haben kannst. Span-Tag hier. Wir können uns mit einem 0-Punkt-Körper rühmen weil wir dem einzelnen Beitrag basierend auf der Idee gegenüberstehen. Es wird also immer einen einzigen Bereich außerhalb des Objekts haben. Ich hoffe, du bekommst diesen Punkt. Gehen wir jetzt in den Browser. Jetzt können Sie sehen, dass wir auch den Körper anzeigen können . Für diesen Beitrag. Wir können diesen zeigen. Wir können den Titel und den Text anzeigen. Und lasst uns erneut auf der Grundlage eines Ausweises treffen. Wir haben auch Lader gesammelt. 11. Schaltflächen hinzufügen: Jetzt müssen wir zwei Schaltflächen hinzufügen, die du machst. Tippe auf „Löschen“. Fügen wir diese Schaltfläche auch hinzu. Nach dieser Karte gehen wir zu diesem Button. Also benutze ich deinen Platz. Wir können ein paar Requisiten wie Middle anbieten. Ich werde ein bisschen Inline-Styling haben. Marge top, ich gebe dir einen Spielraum, Top 35, Rand links. Das sind fünf. Und ich gebe Float, Float, Float rechts. Jetzt. Zwischen dem Raum werden wir unseren Knopf haben. Knopf. Auch hier werden wir Komponenten verwenden und entwerfen. Wir können Ihre Ausrichtung kacheln lassen. Wir müssen den Zeiger angeben. Wir werden Typ haben, tippen. Ich gebe dir eine Primarvereinigung. Wir werden Danger haben. Wir werden jetzt auch onClick-Methode haben Judge, definieren Sie den Wert-Out-Button, damit es einen Löschvorgang hat. Das Gleiche werde ich auch für ein Date kopieren. Es wird nur ein Date sein. Wir können diesen Gefahrenteil beseitigen. Mal sehen, ob wir unsere Buttons sehen können oder nicht. Du siehst, dass wir unsere Knöpfe haben. Lasst uns noch einmal die Seite posten. Wir haben unseren Knopf. Es funktioniert. 12. DELETE mit createAsyncThunk: Bei der nächsten Operation werden wir den Löschvorgang ausführen. So können wir diesen Port löschen, wir basierend auf der ID bezahlt haben. Also müssen wir zuerst unsere Aktion in unsere Post Slash Dot JS-Datei schreiben . Lasst uns das zuerst machen. In Ports wie Dot JS-Datei werde ich noch eine Aktion haben. Lassen Sie uns Beiträge löschen. Ich kopiere das einfach. Ich füge es einfach hier ein. Und ich werde das einfach ändern. Es wird also löschende Beiträge sein und dies wird x sein und mit dem Löschbeitrag betitelt. Auch hier werden wir den Beitrag basierend auf der ID löschen. Hier werden wir die ID aus unserer Komponente besiegen und die URL wird additiv sein. Darüber hinaus müssen wir hier eine Methode bereitstellen , da wir hier fetch verwenden. Wir müssen hier eine Methode bereitstellen. Wie löschen. Bisher müssen Sie keine Methode bereitstellen, um die Daten vom JSON-Server oder einer API zu erhalten . Bei anderen Anfragen wie Löschen oder Aktualisieren müssen Sie die Methode hier angeben. Also hier stellen wir die Methode delete zur Verfügung. Das wird eine additive Sache sein. Jetzt stellen wir mit API-Anfragen. Dadurch entsteht ein Think Tank, drei Lebenszyklen generiert , die wir in unserem Reduzierstück auflösen werden . Wieder, was müssen wir tun? Also werde ich nur diesen drei Lebenszyklus kopieren , voll gebaut und geleitet wird. Und ich füge es hier ein und stelle sicher diesen aus dem Leitfaden ändere, um Beiträge zu löschen. Und das können wir entfernen. Es wird Jet-Action-Punkt-Nutzlast sein. Lassen Sie uns also diese Aktion verwenden, die wir hier in unseren Komponenten erstellt haben. Gehen wir also zur Datei index.js. In onclick. Wir können diese Aktion zerstreuen, damit sie den Datensatz löschen kann. Hier. Ich zeige diese Aktion an. Versenden und löschen Sie also Beiträge. Also importiert VS-Code diese Aktion automatisch für mich. Und das können wir auf diese Weise zerstreuen . Wir werden also dieselbe ID anzeigen , die wir zum Ausfüllen der ID verwenden. Okay? Vorher. Wir können hier eine ID haben, wie diesen Index der Array-Punkt-ID, Mal sehen, ob wir diesen Port löschen können oder nicht. Erstellen wir für diesen einen Beitrag, der auf der Fünf-ID basiert. Wir haben diesen Beitrag. Klicken wir nun auf Löschen. Jetzt können Sie sehen, dass wir den Port erfolgreich löschen können , basierend auf demselben Atom, das wir zum Abrufen des Löschvorgangs verwendet haben , ist auch mit unserem Reduct Toolkit in diesem anwendung. 13. POST-Aktion mit createAsyncThunk: Jetzt beim nächsten Vorgang führen wir den Benutzerpool erstellen aus. Sobald Sie darauf klicken, erstellen Sie einen Benutzer für Sie, wir navigieren zum Create Board. Und was auch immer der Port, den Sie erstellen werden , wird nicht in dB gespeichert , da wir die gefälschte JSON-Platzhalter-API verwenden. Es verwaltet also keine Datenbank hinter der Szene. Sie können dieses Schweinefleisch also nicht in dB speichern. Aber wir werden diese Portanfrage mit Hilfe dieser API nachahmen . Okay? Wir werden diese Aktion in unserer ersten Dia-Punkt-JS-Datei erstellen. Was ich tun werde, kopiere ich das hier. Ich füge es hier ein. Erstellen Sie einen Beitrag für eine bessere Note. Jetzt müssen wir hier einige Änderungen vornehmen. Dieses Mal erstellen wir die Pore damit sie keine ID akzeptiert. Wir können diesen Teil entfernen. Danach. Was müssen wir tun? Methode? Wir werden beide Methoden noch bereitstellen, weil wir einen neuen Port erstellen. Und danach müssen wir auch den Header bereitstellen. Sonst funktioniert es nicht. Also habe ich Header getreten, wir müssen einen Diebstahl bereitstellen. Wir können Ihre Bewerbung JSON geben. Dann sind wir den Inhaltstyp, die Inhaltstypanwendung vordefiniert . Json. Wir werden Körper haben, JSON, stringify. Wir werden die Pore mit Titel und Titel erstellen , die wir hier geben können. Wir werden Werte erhalten. Wir werden Werte aus unseren Komponenten erhalten. So können wir diesen Wert so behandeln. Wir können wie Values, Punkttitel haben. Wir können wie Body Values Punktkörper haben. Das Notwendige werden Additive. Wir haben diesen Port erstellt und keine Sorge, ich werde diesen Teil erklären. Der Werte-Teil. Hier ist Wert nichts anderes, aber er enthält ein Objekt mit einem Titel und einer Körperinformation. Und das erhält Werte von unserer Komponente und wir geben Titel und Körper an. Aber wir müssen unser kreieren ausfüllen , denn das ist Titel und Körper. Sagen wir, das alle drei versprechen das Leben , das von unserem Schöpfer erzeugt wird, denke ich Sprache. Also nochmal, ich kopiere einfach den S3-Lebenszyklus ein. Wir können es hier malen. Und vergessen Sie nicht, diesen aus dem Bewertungsbuch zu ändern, um beides zu erstellen. Lassen Sie uns das kopieren, lassen Sie Pe zwei Stufen. Und der Rest der Sache wird additiv sein. Wir sind mit dem eigentlichen Teil fertig. 14. Arbeiten mit dem Postformular erstellen: Also lasst uns daran arbeiten. Erstellen Sie beides aus unserem Anti-Design. Wir müssen eine Komponente mitbringen. Die Komponente, die wir hier benötigen werden , Eingabe, Taste, Karte, Speicherplatz. Wir müssen Sie auch auswählen und Sie bleiben von unserem React verschont. So riesiger Selektor. Wenn die IT den Versand von der Reaktion mitbringen und nutzen kann, brauchen wir auch einen riesigen Zustand. Ich definiere einen Status mit Werten. Der gleiche Wert, den wir durch unsere Aktion weitergeben werden , damit sie hier in unserer Slide-Punkt-JS-Datei empfangen kann . Arbeiten wir an diesem Create-Port. Riesiger Staat. Und wir werden unseren Ausgangszustand mit einem Objekt definieren. Wir werden Titel und Körper haben. Und danach werden wir einen Hypothekenstaat haben. Das ist also mit hässlich gepaart. Wir beschreiben zwei diskrete erstellte. Sobald der Benutzer ein schlechtes erstellt hat, werden wir auf derselben Seite angezeigt, die einen riesigen Zustand erzeugt hat , und zunächst wird es falsch sein. Lassen Sie uns danach die Referenz von uns speichern. Es ist eine paginierte Versandvariable. Normalerweise versandt. Zuerst werden wir an einer Off-Formularkomponente arbeiten . Also werden wir ein Formular erstellen. Lasst uns das entfernen. Wir werden ein Formular haben. Lassen Sie uns den Aktionsteil entfernen. Und hier werden wir auf Submit Methode haben, die wir definieren werden Handle Submit. Das Formular, das wir haben werden. Danach. Wir werden unser Eingabefeld definieren. Hab dir einen Platzhalter gegeben. Titel. Typ, Text ändert sich nur. Wir werden dir geben. Ich kann dir gerne festgelegte Werte geben. Ich kann die Werte verteilen und wir müssen nur, und wir können den Titel auf Zielpunktwert setzen. Jetzt werden wir Werte haben. Die Werte, Werte. Aus Werten können wir also Textur wie Titel und Körper entnehmen. Im Wert können wir den Titel übergeben. Lassen Sie uns diesem Eingabefeld auch ein wenig Inline-Styling geben. Also gebe ich 400 Pixel. Danach werde ich den oberen Lappenpunkt haben. Dann haben wir einen Textbereich. Geben Sie also den Punkttextbereich ein. Danach. Und im Gegenteil, ich kopiere dieses Ding. Ich füge es hier ein. Hier wird es Leiche sein. Es wird angehängt sein und das wird, und es wird Körper werden. Körperwert wird Körperbreite sein wird additiv sein. Oder wir müssen geben, weil es sich um einen Textbereich handelt, also wird er groß sein. Jetzt mache ich wieder ein paar Pause. In diesem Bereich. Ich erstelle hier einen Knopf. Stil. Lass uns ihm einen Stil geben. Marge. Zehn. Wir werden den Button hinzufügen. Ich werde NTDs N Button Component verwenden, onclick. Wir werden die onClick-Methode haben. Der Wert des Buttons wird das Ziel zurück sein. Wir werden die onclick-Methode definieren. Lasst uns zurückgehen. Grundsätzlich navigieren Sie nur zur Homepage zurück. Ich werde auf „Absenden“ -Button haben. Typen einreichen. Wir können primären HTML-Typ-Gipfel geben. Gehen wir in den Browser. Wir haben einen Fehler, also müssen wir ihn aufschieben und senden behandeln. Lassen Sie uns also vorerst einfach eine leere Funktion erstellen. Es wird eine Veranstaltung erhalten. Gehen wir in den Browser. Also haben wir diesen Zwei-Input. Einer ist ein normaler Eingabefehler und anderer Textbereich, den wir zurückgehen und senden Button und wenn Sie auf Zurück klicken, werden Sie nie zur Homepage gelangen. Von React Router dom. Bringen Sie die USA navigieren Wir werden navigieren hier benutzen. Verwenden Sie navigieren. Und was wir tun müssen. Wir zeichnen die Referenz auf, in der wir navigieren und navigieren variabel und einen onclick. Wir können navigieren. Wir können dir navigieren lassen. Wir wollten zur Homepage navigieren . Versuchen wir es zuerst. Dieses hier klicken wir auf GoBear. Aber jetzt können wir zur Homepage navigieren. 15. Verschieben: Jetzt müssen wir also grundsätzlich an den Create-Posts arbeiten. Also werden wir eine Aktion anzeigen, die wir in unseren Posts erstellt haben, wie dot js file, handle submit, wir werden diese Aktion verzweifeln. Was wir nun tun müssen, um Material zu behandeln, das bisher ein Ereignis erhält, müssen wir einen Punkt machen, der Standard verhindert, um das Standardverhalten des Browsers zu verhindern. Und danach können wir das als Aktion zeigen. Die Aktion, die wir haben, wie sowjetischen Code erstellen, importiert automatisch , den ich für mich gesendet habe. Und wir können einfach die gesamten Werte übergeben. Dieser Wert, insbesondere wir strukturieren hier. Sie können dies in unserer Aktion „Beiträge erstellen“ sehen, wenn Sie beide Steuern erstellen und wir den Wert übertragen , den wir durch unsere Aktion senden. Danach wollte ich das Eingabefeld eingeben. Was wir hier tun können, Titel. Titel wird also in Putty sein, wird der Anstoß sein. Wir müssen auch das Set machen. Also stimmt beides. In dem Moment, in dem Sie dieses Formular absenden, wollte ich den Port auf derselben Seite unter dieser Formularkomponente anzeigen derselben Seite unter , die ich erstellen wollte. Okay, deswegen habe ich einen separaten Zustand wie gesetzt. Und es wird wahr werden. Wir können diesen überprüfen, ob diese Poster funktionieren oder nicht. So können wir es mit Hilfe von Reduct Deadpool überprüfen. Gehen wir zuerst in den Browser und lassen Sie uns einen Live-Test geben. Und ich füge hier einen Text in diesen Textbereich ein. Ich habe mir meinen Text hier vorgestellt. Sie können sehen, dass wir auf Absenden klicken. Lasst uns die Reduktionstiefe öffnen. Das siehst du. Sie können sehen , dass unser Versprechen hier erfüllt wurde. Und wir können sehen, dass wir angestochen wurden. Sie können dort sehen, dass wir unseren Titeltext haben. Sie sehen auch, dass eine UserID ethisch eine zufällige Benutzer-ID generiert. Sie können sehen, dass wir eine haben, die eine hinzugefügt hat, nicht die zufällige ID, die von unserem JSON-Server erstellt wird. Was wir nun tun müssen, zeigen wir das erstellte Portrait unter dieser Formularkomponente an. Sobald der Benutzer das Formular abgeschickt hat. Gehen wir zum VS-Code. Ich benutze hier einen riesigen Selektor. Sie haben ausgewählt, dass ich verwenden werde, um den Statuswert aus unserem Shop-Status im Grunde zu verfolgen . Okay? Wir können einen Wert haben, wie zu posten und zu laden. Danach. Wir müssen danach tun, wir werden eine Funktion haben, die für das Nähen von erstellten Blöcken oder so verantwortlich ist Post Blog. Darin werden wir zurückkehren. Wir werden auch hier Fragment verwenden. Ich benutze Loading. Wenn das stimmt, zeige ich eine Kartenkomponente an oder lade ich Kartenkomponente an, die für das Nähen dieses Zeichenladers verantwortlich ist . Und ich werde hier eine Zählung geben, eine andere, ich werde beide Tokio blockieren. Schon wieder. Was ich machen werde, also gehe ich in die Datei index.js. Und ich kopiere das Ding einfach. Lasst uns herkommen. Und lasst es uns hier einfügen. Wir müssen uns vielleicht ändern. Lass uns dir zuerst ein abschließendes div geben. Dies wird der Test sein, das Silvia-Additiv. Dies wird bearbeitet. Also wird alles bearbeitet. Denn sobald Sie dies für den Beitragsstatus erstellt haben für den Beitragsstatus wird ein einzelnes Array von Objekten enthalten. Wir können diesen erstellten Port unter dieser Formularkomponente sortieren. Ich werde wieder ein paar Pause machen. Und wir können beides haben. Stimmt. Dann gehe ich zu diesem Beitrag, um Blog zu posten. Lasst uns das retten. Gehen wir zum Browser. Aktualisieren Sie das hier. Lass uns den Blog testen. Und ich wähle den Inhalt hier aus. Ich habe mir den Inhalt des Körpers hier vorgestellt. Klicken wir auf „Absenden“. Sie können sehen, dass wir erfolgreich einen Port erstellen können und unter unserer Formularkomponente angezeigt werden. Wir haben diese Erstellungsoperation mit Hilfe des Leser-Toolkits in unserer React-Anwendung durchgeführt. Bei der nächsten Operation werden wir den Update-Vorgang durchführen. 16. PUT mit createAsyncThunk: So wird die Erstellungsoperation mit Toolkit erledigt. Jetzt ist es an der Zeit, den Update-Vorgang mit Hilfe des Radar-Toolkits durchzuführen . Zuerst werden wir eine Aktion erstellen , die dafür verantwortlich beide basierend auf der ID in den Ports wie der Dot-JS-Datei zu aktualisieren ID in den Ports wie der Dot-JS-Datei . Wir werden eine Aktion erstellen. Also was ich tun werde, ich kopiere einfach die gesamte Aktion. Ich werde es einfach hier drüben einfügen. Dies wird Update. Beide werden zum Update-Board. Jetzt aktualisieren wir den Port basierend auf der ID unserer Komponente. Wir werden ein paar Dinge wie ID erhalten. Wir werden die Leiche aktualisieren. Wir werden auch den Titel weitergeben, okay? Aber wir werden nur den Hauptteil des einzelnen Blogbeitrags aktualisieren . Hier müssen wir die ID angeben da wir den Port basierend auf der ID aktualisieren und die Methode wird gesetzt. Der Header wird ein Aufenthalt sein, wie er sich im Körper befindet. Wir müssen sie injizieren, diese entfernen. Wir können einfach Additive wie Titel und Body Director übergeben, die Sache wird additiv sein. Jetzt. Jetzt schafft dies einen Think Tank, einen Lebenszyklus mit drei Versprechen erzeugen wird. Lassen Sie uns also den Lebenszyklus der drei Versprechungen in unserem Reduzierstück noch einmal behandeln . Also kopiere ich einfach das Drei-Leben hier drüben. Und ich werde es einfach malen. Und stellen Sie sicher, dass Sie vom Bewertungsbuch aktualisieren, um es zu aktualisieren. Es wird Update-Board sein. Dies wird auch Update sein, von denen bekannt ist, dass sie diese ganze Sache hier ändern. Und wir müssen etwas Nachlass definieren, einen zusätzlichen Ausgangszustand, den wir definieren müssen. Wir werden nur aktualisieren, dass der Körperteil des Körpers anfangs Empathie sein wird und es wird einen Bearbeitungsmodus geben. Anfangs wird es also das Falsche sein. Wir werden auch eine zusätzliche Aktion haben. Also werde ich diese Aktion im Reducer definieren. Dieser Unfall war also für die Aktivierung des Bearbeitungsmodus verantwortlich . Wir werden ein ähnliches Set haben. Dies wird Staat und Aktion haben. Hier. Wir werden einen Staat haben, der tatsächlichen Nutzlast entspricht. Wir werden dieses Ding von unserer Komponente erhalten. Wir müssen noch ein Update wie State Dot, Körper, Punkt, Nutzlast und Körper durchführen. Wir erhalten zwei Dinge wie den Bearbeitungsmodus und den Körperteil des Single-Block-Boards. Exportieren wir diese Aktion auch. Was wir hier tun können, können wir wie export const, rühmen, schneiden, dot, action haben. Und wir können hier wie set edit geben. Okay. Gehen wir nun zurück zum UI-Teil. Lass uns zurück gehen. Lasst uns hier einen Beitrag holen. Jetzt haben wir einen Bearbeitungs-Button hier drüben. Und sobald Sie darauf geklickt haben, haben Sie diesen Körperteil mit Italien in den Textbereich umgewandelt. Und der Button-Wert erhält auch Change. Button-Wert, gut. Zum Speichern bearbeiten. 17. : Also eine index.js Datei. Was wir zuerst tun müssen, erhalten wir diesen neuen Zustand, den wir gerade in unseren Beiträgen wie dem Punkt-JS-Dateiobjekt definiert haben unseren Beiträgen wie dem Punkt-JS-Dateiobjekt oben aufgeführten US-Selektor extrahieren. Und hier was müssen wir tun. Jetzt werden wir unseren Modus haben. Wir befinden uns im Bearbeitungsmodus. Was wir dann tun müssen, werden wir hier Fragment haben. Ein anderes Teil. Wir zeigen nur diesen Körperteil, dir gegangen ist, dass der Beitrag nicht bearbeitet wird. Jetzt müssen wir die ganze Logik in diesem Fragmentteil definieren und den Beitrag bearbeiten. Also was ich tun werde, also werden wir von diesem aus OnClick haben. Wir werden eine Aktion aussenden. Versand. Und wir werden die besagte Idiotin verdrängen. Okay? Sobald der Benutzer auf diese Bearbeitungsschaltfläche klickt, wird der Modus wahr, also wahr. Und wir müssen auch an der Leiche weitergeben. Wertvoller Körper. So können wir den Körper Light Posts 0 Punkt Körper bekommen. Formatieren wir das hier. Speichern wir die Datei. Jetzt hier, was wir tun müssen, also wird es in Klammer sein. Also lass uns dir eine Klammer geben. Hier. Wir werden Textbereich, Textbereichszeilen haben, um Werte zu haben. Okay? Wir müssen also den Ausgangszustand definieren. Wir müssen einen Status für diese Körperwerte definieren. Was wir also tun können, können wir einen weiteren Zustand wie Body Tag haben. Weil wir den Hauptteil des einzelnen Blogbeitrags aktualisieren. Wir debattieren nicht über den Titelsatz. Es wird schade sein. Und hier werde ich einen großen Effekt erzielen. Verwenden Sie den Effekt. Verwenden wir Effect run, sobald wir den Wert in unserem Körper haben. Ich spreche über diesen Körper , den wir in unserer Posts ly dot js-Datei definiert haben . Wir haben die Leiche. Dann Körper. Auf diese Weise können wir den Wert von body hier in einem Textbereich füllen , was wir haben werden, okay. Wir werden eine Änderung haben. Es wird einen Ereignissatz, einen Textkörper, einen Punkt, ein Ziel, einen Punkt, einen Wert haben. Dann haben wir zwei Knöpfe. Der Button-Name wird wie Speichern und Abbrechen aussehen. Pro Benutzer hat die Möglichkeit, den Beitrag zu speichern , und er kann auch den Aktualisierungsvorgang abbrechen. Also müssen wir mit sieben Abbrechen knöpfen. Ich benutze deinen Platz. Fügen wir hinzu, dass wir ein Größenmodell haben werden. Okay? Ich werde etwas Fliesenmarge haben, oben fünf Gewinnspanne übrig. Ich gebe Marge links fünf. Zwischen diesem Raum werden wir unsere beiden Knöpfe haben. Button-Typ, primär. Wir werden einen Tisch haben, okay? Werde einen weiteren Knopf haben, der der Krebs sein wird. Wenn Sie auf „Abbrechen“ klicken, kommen Sie grundsätzlich aus dem Bearbeitungsmodus heraus. Wenn Sie auf die Schaltfläche Abbrechen klicken, wird es nur normal sein. Zunächst können Sie diesen überprüfen, ob wir den Hauptwert des Blogs in einem Textbereich auffüllen können den Hauptwert des Blogs in oder nicht, wenn wir auf die Schaltfläche Bearbeiten klicken. Lasst uns das auffrischen. Stellen wir uns dem Beitrag mit ID drei gegenüber. Klicken wir auf „Bearbeiten“. So können wir den Körperwert des Bloggens eines Textbereichs veröffentlichen . Dieses Ding, das wollen wir nicht. Okay, lass uns zum VS-Code gehen. Was wir hier machen können. So können wir hier wie diesen gesamten Raum nachsehen. Wir können hier nachsehen, wie ob Sie in sind, ob Sie sich nicht im Bearbeitungsmodus befinden. In diesem Fall wollten wir nur diesen Bearbeitungs- und Lösch-Button machen. Lasst uns das schneiden. Gehen wir in den Browser. Unterscheiden. Füllen wir den Beitrag aus. Jetzt haben wir diese beiden Knöpfe. Und sobald Sie auf die Schaltfläche „Bearbeiten“ geklickt , befinden Sie sich jetzt im Bearbeitungsmodus. Dann möchte ich in diesem Fall nicht, dass es diese beiden Tasten anzeigt. Sobald der Benutzer entweder auf Speichern oder Abbrechen klickt, werden diese beiden Buttons hier angezeigt. 18. Dispatch zum Update: Bisher werden wir die onClick-Methode haben. Hier. Wir werden es zum Handeln schicken. Mit hässlich wird verwendet, um den Einzelblock-Port mit Körperwert zu aktualisieren . Okay? Also hier werden wir eine Aktion aussenden, die wir in unserer Post-Schrägpunkt-JS-Datei erstellt haben . Also müssen wir wie ID, Post-ID übergeben . Wir senden auch den Titel, denselben Titel, den wir senden werden weil wir den Titel nicht bearbeiten. Wir aktualisieren nur den Körperwert von Blog und Body. Wir werden die Körpertemperatur senden. Diesen Wert ändern wir nur. Wenn du auf den Titel klickst. Also müssen wir den Update-Prozess grundsätzlich stoppen. Insgesamt wird hier aus dem Bearbeitungsmodus herauskommen. In diesem Fall müssen wir also auch eine Aktion aussenden. Wir werden hier wieder die onClick-Methode haben. Wir werden versenden, versenden. In diesem Fall wird es das Falsche sein. Auch hier müssen wir noch eine Aktion aussenden. Versand bearbeiten. Sobald Sie auf die Bearbeitung geklickt haben, wollten wir grundsätzlich aus dem Bearbeitungsmodus herauskommen. Wir müssen also auch das bisherige Jahr in GitHub versenden, um den Körperwert eines einzelnen Blogbeitrags zu aktualisieren. Hier werden wir wieder den edit false pfaden. Okay? Und danach müssen wir diesen Körper im Grunde dazu bringen, nachzuahmen. Auch hier können wir den Körper in die Unendlichkeit weitergeben. Hier besorgen wir uns welche. Es wird also Komma sein. Also lasst uns diese Datei speichern. Und lass uns in den Browser gehen. Aktualisieren Sie das hier. Wir fangen bei Null an. Lasst uns dem Blog gegenüberstehen. Warte auf den Ausweis fünf. Klicken wir nun auf „Bearbeiten“. Jetzt befinden wir uns im Bearbeitungsmodus. Und wenn es einen Test gibt, können wir den Wert nicht aktualisieren. Tippen funktioniert hier also nicht. Lass mich sehen, was passiert. Im Wandel. Was wir tun müssen. Also läuft hier etwas schief, schätze ich. Hier müssen wir also grundsätzlich den Körper zeigen. Körper. Lassen Sie uns in den Browser gehen und das Board basierend auf der Benutzer-ID fünf abrufen. Lasst uns drauf klicken. Jetzt befinden wir uns im Bearbeitungsmodus. Lasst uns nun diesen Körperwert von Blackboard aktualisieren. Lassen Sie uns Ihnen einen Live-Blog geben, der aktualisiert wurde. Wenn du auf Speichern klickst. Wir haben den aktualisierten Körperwert des Blogs hier, Sie können sehen, dass wir einen Körper wie Blog aktualisiert haben. Wir müssen den Update-Vorgang auch mit der Reduzierung auf Flüssigkeit getreu durchführen den Update-Vorgang auch mit der und was auch immer das Update, das Sie hier machen, es wird nicht in dB gespeichert, da JSON-Platzhalter dies nicht tut jede Art von Datenbank hinter der Szene. Wenn Sie den Dichter neu formulieren und erneut mit der gleichen ID wie vier gegenüberstehen , erhalten Sie den alten Körperwert dieses Blogbeitrags. 19. Project 2 Cocktail App - Demo: Willkommen in diesem Bereich. In diesem speziellen Abschnitt werden wir unsere Anwendung mithilfe des Redact Toolkits mithilfe von Create Tasting erstellen. Das ist eine Cocktail-Anwendung, bei der wir den ganzen Cocktail zulassen, indem wir eine API-Anfrage eines Drittanbieters mit create tasting thing stellen. Also werden wir alle Cocktails auf unserer Homepage verkaufen. Wie Sie sehen können, gibt diese Drittanbieter-API rund 20 Cocktails zurück. Das kannst du, das kannst du auf der Homepage sehen. Sie können sich auch den einzelnen Cocktail ansehen , um weitere Informationen zu diesem bestimmten Cocktail zu lesen. Wenn Sie also darauf klicken, wird eine Schaltfläche mit den Details angezeigt. Sie werden zu einer einzigen Cocktail-Seite weitergeleitet, auf der Sie weitere Informationen zu diesem Basiscocktail erhalten. Und wenn Sie auf Google klicken, kehren Sie zur Startseite zurück. Jetzt können Sie es auch auf einen bestimmten Cocktail einstellen. Also gebe ich dir ein Schlüsselwort wie Adam. Sie können das mit dem Atom-Schlüsselwort sehen, es ist für Cocktail geschrieben. Wir haben diese Suchfunktion auch in unserer Cocktail-Anwendung nur mit dem Redact-Toolkit implementiert . Insgesamt wird diese Anwendung, die wir in diesem Abschnitt erstellen, der das Reader-Toolkit mit der das Reader-Toolkit eine Symptom-Middleware erstellt. Und bevor wir mit der Erstellung dieser Anwendung beginnen, werden wir ein wenig über die Erstellung einer Think-Tank-Middleware erfahren , und das werden wir im nächsten Video verstehen. Wir sehen uns im nächsten Video, in dem wir darüber sprechen werden, wie man einfach eine Middleware erstellt. Dann beginnen wir mit der Erstellung dieser Anwendung. 20. Project 2 Cocktail App - Einrichten: Jetzt bin ich in diesem Verzeichnis und öffne hier eine Befehlszeile. Öffnen wir also eine Befehlszeile. Und ich werde ein Projekt mit dem Befehl px Create React App und dem Projektnamen erstellen. Der Projektname wird Toolkit Cocktail sein. Also gebe ich diesem Projekt einen Namen und drücke die Eingabetaste. Also ich glaube, ich habe das NPM benutzt. Es wird also n p x null NPM sein. Also lass uns das ändern und lass uns die Eingabetaste drücken. Und es dauert ungefähr zwei bis 3 Minuten, um alle unnötigen Abhängigkeiten zu installieren. Und ich komme zurück, sobald die gesamte Abhängigkeit installiert ist. Es sieht also so aus, als ob unser Projekt-Setup jetzt abgeschlossen ist. Gehen wir also zuerst in dieses Verzeichnis , das Toolkit Cocktail ist. Gehen wir also in dieses Verzeichnis. Und Leute, wir müssen einige Abhängigkeiten installieren. Bevor ich npm starte, installieren wir diese Pakete. Die Pakete, mit denen wir arbeiten werden, wie React Router, Dom. Wir benötigen den React-Router, um diese Anwendung zu erstellen. Reagieren Sie auf Redux. Das Wichtigste ist das Redox-Toolkit. Okay? Redux, letztes Toolkit. Könnt ihr nur so viel benötigen um diese Anwendung mit Hilfe des Redex-Toolkits zu erstellen. Warten wir auf diese Paketinstallation und ich komme zurück, sobald das gesamte Paket installiert wurde. Leute, sind alle Pakete installiert. Jetzt werde ich dieses Projekt, das ich bereits im Visual Studio-Code geöffnet habe, erledigen und dafür bezahlen , es zu starten . Gehen wir also zurück zum Visual Studio Code. Und jetzt können Sie sehen, dass unser Projekt erfolgreich kompiliert wurde. Gehen wir also in den Browser. Sie können sehen, dass wir kein Problem haben. Und lassen Sie uns in unserer Bewerbung auch den Material Design Book Club besuchen. Also werden wir dieses Kachelset verwenden. Also was ich tun werde, also was du tun musst, du musst einfach zu diesem Link gehen und du musst einfach diesen Teil kopieren. Wir werden dieses Stil-Setup verwenden, das Materialdesign Bootstrap Five. Aber diese Anwendung, und lass uns in den Visual Studio-Code gehen. Also habe ich dieses Stylesheet kopiert. Und in public index.html müssen wir es einfach hier einfügen. Okay? Wir sind also mit diesem erblichen Material fertig als mit Bootstrap. 21. Project 2 Cocktail App - Header: Jetzt beginnen wir mit der Arbeit an der Header-Komponente. Also erben Sie die Dot-JS-Datei, was wir tun werden. Es wird also eine sehr einfache JS-Datei in der Header-Punkt-JS-Datei enthalten sein. Also verwenden wir den Hashtag-Status des Materials für die n Booster Five. Also werden wir den Klassennamen verwenden. Also der Klassenname mit Licht, Navbar, Licht. Dann sei das Licht. Und das wird behoben. Oben. Okay? Also diese Klasse werden wir jetzt verwenden, dann werden wir einen weiteren Div mit der Klasse Behälterflüssigkeit haben . Dann werden wir darin das Schlüsselwort ban haben. Und wir werden ein weiteres Platin haben , dessen Klassenname leicht sein wird. Sie umfassen ein Schlagwort und der Klassenname lautet Navbar, Brand. Und unterste Null bis Eins, t1, dann Kopfzeile, Titel, dann Textfelder. Okay? Das wird also der Klassenname für ein Span-Tag sein. Und wir können dein Leben geben, finde deinen Lieblingscocktail. Okay? Das ist also der grundlegende Inhalt , den wir in unserer Hero Dot JS-Datei haben . Okay? Und dieser, und dieser wird das Navi sein, okay? Tu es nicht. Lass uns das verketten. Wir sind also mit dieser Header-Komponente fertig. Dies darf also nur der Inhalt sein, der für die Header-Punkt-JS-Datei erforderlich ist. Und ich werde dieses verschwommene Gut in die Indexpunkt-CSS-Datei malen . Ich werde für den CSS-Code für diese Indexpunkt-CSS-Datei bezahlen. Und lass uns in die app.js gehen. App.js fünf Minuten, um den VS-Code der Header-Komponente automatisch für diese Header-Komponente zu bringen VS-Code der Header-Komponente . Gehen wir in den Browser und überprüfen ob diese Header-Komponente funktioniert oder nicht. Sie können sehen, dass wir diesen schönen Header haben. Finden Sie Ihren Lieblingscocktail. 22. Project 2 Cocktail App - Redux-Toolkit konfigurieren: Jetzt werden wir an der Präsentation des Cocktails arbeiten. Also werden wir zuerst das Reader-Toolkit in unserer Anwendung einrichten . Also Leute, lasst uns das Redact-Toolkit in unserer Anwendung einrichten . Anstelle von Voltage werden wir also einen anderen Ordner haben , der Features heißt. Okay? Und theoretisch, die Reduzierung darin, werden wir eine Datei haben, die store dot js ist. Und an dritter Stelle steht das Feature. Wir lassen den Dateicocktail fliegen. Okay? Da wir in dieser Anwendung mit dem Cocktail arbeiten , der Dateiname wie Cocktail Slice. Okay, auf den Cocktail-Folien werden wir alle asynchronen Anfragen stellen und den Shop aktualisieren. Okay, also zuerst müssen wir Create Slides mitbringen und einen Think Tank aus dem Redux-Toolkit erstellen . Okay, lass uns diese Dinge zuerst bringen. Wir müssen Create Slides mitbringen und alles erstellen. In einem größeren Toolkit können Leser also standardmäßig aufgenommen werden, sodass sie die asynchrone Löschlogik ausführen können, bevor der Prozess, die Wüste, an den Reducer gesendet wird. Bei besonders irritierendem Beton sind sie für die Ausführung asynchroner Aufgaben verantwortlich. Deshalb werden wir sie asynchron erstellen, um die asynchronen Aufgaben auszuführen und Folien zu erstellen. Im Grunde genommen eine Funktion, die ein Objekt der Reduzierfunktion akzeptiert und zunächst übernimmt, und es ist ein Blitz. Und dann generiert es automatisch eine Aktion, erzeugt einen Akzent, der dem Reduzierer entspricht, und es ist geblieben. Mit Hilfe des Retest-Toolkits müssen Sie also im Grunde keine separate Aktion, den Aktionstyp Reducer für Aktionsdateien, erstellen . Alles wird also automatisch mit Hilfe von Folien generiert. Und lassen Sie uns die gesamte asynchrone Logik mit Hilfe des Reader-Toolkits schreiben . Insbesondere werden wir die gesamte Cocktailliste abrufen und auf der Homepage anzeigen. Schreiben wir also so, wie es die Exportkosten sagen. Okay. Im Grunde wird es also für die Zubereitung aller Cocktails verantwortlich sein . Mit Hilfe der API werden wir die vorgenommene Bonität verwenden. Und im Grunde akzeptiert dies die drei Parameter , bei denen es sich um einen Akzenttyp handelt, bei dem es sich um die Zeichenfolge handelt, eine Callback-Funktion. Und dann optional ist das ein Objekt, okay? Das wird also sein, der dritte Parameter, wird das Objekt sein und das ist nicht optional. Okay? Definieren wir es also mit dem Typ zehn, der die Zeichenfolge sein wird. Da wir es mit dem Cocktail zu tun haben, definieren wir also wie Cocktails. Und das wird wie Pitch sein. Pitch Cocktails, okay? Welche Cocktails? Und als zweiten Parameter werden wir eine Light-Callback-Funktion haben. Okay? Diese Callback-Funktion wird also im Grunde die API-Anfrage stellen. Okay? Ich glaube, wir werden riesig sein. Und für die API-Anfrage verwenden wir nur den Phage. Geben Sie h zurück. Wir fügen die API hier ein. Ich füge einfach die API in diesen Phage ein. Also füge ich einfach die API hier ein. Diese APA, die wir verwenden werden, bekommt also den ganzen Cocktail. Also hat diese API im Grunde 25 Cocktails zurückgegeben, okay? Rendite von rund 25%. Sie können also sehen, dass es ungefähr 25 Cocktails in meinem Postman zurückgibt . Gehen wir also zum Visual Studio-Code und wann das Versprechen nach den API-Anfragen gelöst ist . Also werden wir uns mit der Methode befassen. Wir werden die Antwort erhalten. Und das wird nur eine Antwort sein, Jason. Okay? Leute, der Parameter im Create ist in Thank Isn't ist eine Option und wir sind fertig mit der ersten Aktion, die dafür verantwortlich ist, alle Cocktails von dieser APA abzurufen. So entsteht nun ein Think Tank mit Italien, der drei versprochene Lebenszyklen generiert hat, die , erfüllt und diesen Lebenszyklus widerspiegeln den wir in dem zusätzlichen Reduzierer behandeln werden. Im Grunde genommen behandeln zusätzliche Reducer die asynchrone Anfrage. Okay? Wir werden uns um all diese drei Lebenszyklen kümmern, also erfüllte und abgelehnte Ausgaben. Wir werden uns mit dem zusätzlichen Reducer befassen, die Bearbeitung der asynchronen Anfrage verantwortlich sein wird für die Bearbeitung der asynchronen Anfrage verantwortlich sein wird. Wir werden die Create Slides also nur für diesen Zweck verwenden. Also, was wir jetzt hier machen können, Const Cocktail Slide. Und wir werden noch Folien erstellen verwenden. Das wird also im Grunde Akzeptanz sein, so ein kleiner Name, den Sie ihm geben können wie nur Cocktail, Cocktails. Und als zweites wird es versuchen, den Anfangszustand zu erreichen. Sie müssen sich also zunächst verteidigen , zunächst wird unsere Bewerbung wie Cocktails, der Lehrplan und das PTA sein. Und wir werden auch einen einzigen Cocktail trinken. Es wird auch die einzige Ladung sein, die wir verwenden werden. Das wird also anfangs falsch sein und der Fehler wir auch verwenden werden, wird die Null sein. Also haben wir die Anfangsrate definiert. Das dritte, was wir definieren werden , ist dieser zusätzliche Reduzierer. Reducer, wir werden uns um die drei versprochenen Lebenszyklen kümmern , die entstehen indem wir einen Think Tank einrichten, noch aussteht, erfüllt und abgelehnt wird. Also benutzen wir dein Bein, die Cocktails und das Malen. Und danach werden wir eine staatliche Aktion durchführen. Und das wird so sein, als würde der Staat nicht laden, um zu herrschen. Okay? Malen bedeutet also, dass unsere Daten auf dem Weg sind. Wir haben die Daten nicht erhalten. Bei UAB haben wir die Daten also nicht erhalten. In der Zwischenzeit werden wir also eine Art Spinner zeigen. Deshalb verwende ich Yellow Loading. Okay. Und es wurde erfüllt. Also fh.com, also Phagen-Cocktail, viel erfüllt. Und der Staat wird handeln müssen. Und jetzt machen wir State and Dot Cocktails. Und wir können hier Light Action verwenden, nicht Payload. Das werden also leichte Akzentpunkte , Payload und Getränke sein. Warum verwenden wir also Like X N Dot Payload Dot Drink. Wenn du zu den Pokemon zurückkehrst, siehst du, dass wir die Drinks hier gezielt einsetzen müssen, okay, dann bekommst du den ganzen Cocktail. Deshalb verwenden wir hier x n dot payload dot drinks. Ich hoffe, du verstehst den Punkt jetzt. Und wenn das Laden von Theta1-Punkten ebenfalls falsch ist, sobald wir die Daten auf unserer Benutzeroberfläche erhalten haben. Und definieren wir auch das Abgelehnte. Du musst hier auch das Komma angeben. Andernfalls erhalten Sie diesen Header und dieser wird abgelehnt. Okay? In diesem Fall können Sie einfach die Action-Punkt-Payload verwenden. Und das wird der Staatsfehler sein. Okay? Jetzt müssen wir diesen exportieren. Lassen Sie uns also den Standard, Cocktail Slice Dot Reducer, exportieren . Jetzt werden wir den Shop grundsätzlich mit dem 3D-Toolkit konfigurieren . Es ist sehr einfach, den Shop zu konfigurieren. dem Elbow Predict Toolkit sind nur zwei bis drei Codezeilen erforderlich Konfiguration dieser Tour mit dem Elbow Predict Toolkit sind nur zwei bis drei Codezeilen erforderlich. Wir müssen die Konfiguration aus dem Desk-Toolkit mitbringen. Also konfigurierte Wiederherstellung. Und lassen Sie uns den Cocktailreduzierer importieren. Reduzierproblem. Hervorgehoben. Cocktail fliegt, okay. Und lassen Sie uns Standard exportieren. Bereitgestellter Laden. Und wir können den bereits erwähnten Schlüsselwert unserer Reduzierer erreichen . Und tatsächlich werden wir den Schlüssel definieren. Also werde ich die App und den Tender-Cocktail-Produzenten definieren . Mit Hilfe des App-Schlüssels gehen wir in den Staat, was auch immer wir in unserem Geschäft haben. Was auch immer der Status ist, den wir hier auf unserer Cocktailfolie definiert haben , wir greifen auf all das zu, den Status von einem Geschäft aus, indem wir den Schlüsselwert verwenden. Okay? Jetzt müssen wir eine kleinere Trennung in unserer Datei index.js vornehmen. Also müssen wir zuerst den Laden bringen. Außerdem müssen wir das von React Redux bereitgestellte mitbringen . Bringen wir also das von React Redux bereitgestellte mit. Also vom Reaktor, ihr Enten, wir brauchen einen Anbieter. Und was wir hier tun können, Anbieter, und lassen Sie uns diesen ganzen Teil weglassen. Und fügen wir es einfach hier ein. Und wir werden den Laden definieren und einfach den Laden finden. Sie sagen, dass im Grunde unsere React-Anwendung auf sie zugreifen kann , das haben wir in unserem Inhaltsbereich definiert. Okay, Leute, jetzt haben wir die Redact-Toolkits so konfiguriert , dass sie vollständig in unserer Anwendung enthalten sind. Und Sie können diesen auch im Browser überprüfen. Gehen wir also zum Browser, aktualisieren und öffnen wir das Dev-Tool. Sie können das Datum also hier sehen. Dies ist der Ausgangsstatus unserer Bewerbung. Wir haben also Cocktails mit der Eingabe t auf einer Cocktailparty oder einem Ladefehler. Dies ist dasselbe , was wir ursprünglich in unserer Definition in unserer Cocktail Slide Dot JS-Datei definiert haben, dass wir das Redact-Toolkit in unserer Anwendung erfolgreich konfiguriert haben. 23. Project 2 Cocktail App - Suchkomponente: Also Leute, als Nächstes werden wir am Sucheingabefeld arbeiten. Gehen wir also in den Visual Studio-Code. Also werden wir hier eine Datei erstellen. Du kannst ins Gefängnis gehen. Und wir werden auch eine CSS-Datei haben. Aber auch der dritte Eingang. Okay? Und lassen Sie uns hier zuerst einen Ausschnitt generieren . Und danach werden wir ein paar Hooks essen. Also werden wir diesen Hook in unserer Sucheingabedatei benötigen . Also werden wir einen Benutzer von hier verwenden. Und danach müssen wir auch die CSS-Datei für diese Sucheingabe mitbringen . Also lasst uns das auch übernehmen. Das ist Eingabepunkt-CSS. Und ich werde den CSS-Code für diese Hurricane-Put-Punkt-CSS-Datei bezahlen . Also Leute, ich habe gerade den CSS-Code für diese CSS-Datei mit Sucheingabepunkten ausgewählt . Du kannst das alles hier kopieren, Testergebnis, wenn du willst. Okay, wenn du dieses Video pausierst, hoffe ich, dass du eine Kopie hast. Ich klicke einfach auf Exportieren. Und lassen Sie uns in diese Wasserstoff-Put-Punkt-JS-Datei gehen. Und hier, was wir im Gegenzug tun können, wir werden das div-Tag nicht verwenden. Und du wirst den Klassennamen hier haben. Der Klassenname wird der Abschnitt sein. Das ist okay. Dann werden wir einen anderen Klassennamen mit dem Formular haben. Wir werden also das Formular-Tag sein und der Klassenname wird das fairste Formular sein. Wir brauchen keine Aktion, Verbform. Und informiere, wo wir eines Tages sein werden. Der Klassenname, Formularsteuerung. Okay? Und tatsächlich werden wir ein Label haben. Also lasst uns mit dem Namen weitermachen. Wir können dir so einen Cocktail geben. Okay? Und wir werden hier einen Input haben. Also diese Eingabe, wir werden den Typ haben. Typ ist also der reine Textname. Wir können nur Namen nennen. Sie können hier einen Ausweis geben. Sie werden nur der Name sein. Und lass uns das benutzen, benutze den Rep auch hier. Also konstanter Wert, verwende ihn dort. Und wir werden es hier benutzen, okay? Kompromisswert. Also Suchwert, den kannst du hier angeben. Und den Rest der Logik werden wir später schreiben , sobald wir auf der gesamten Cocktailliste übrig sind. Okay? Also die Geschwindigkeit der Logik für diese Sucheingabedatei werden wir später schreiben, okay? Sobald Sie das gesamte Cocktaildatum auf der Homepage angezeigt haben . Also, was wir hier ab sofort tun können, also gehen Sie zur Datei index.js , nehmen Sie die Sucheingabekomponente mit, okay? Und lassen Sie uns diesen entfernen. Den brauchen wir nicht. Und lass uns in den Browser gehen. Und lass uns einfach auf die Homepage gehen. Jetzt. Jetzt können Sie sehen , dass wir dieses Sucheingabefeld haben dieses Sucheingabefeld und wir werden die Logik später schreiben, sobald wir die gesamte Cocktailliste auf dieser Homepage angezeigt haben , okay. 24. Project 2 Cocktail App - Cocktails mit Aktionen anzeigen: Als Nächstes werden wir daran arbeiten, den ganzen Cocktail-Lift auf unserer Homepage zu entfernen. Also werden wir die Komponente hier definieren. Definieren wir hier also eine Komponente , um den gesamten Cocktail anzuzeigen, der auf unserer Homepage übrig ist. Der Komponentenname wird wie list dot js lauten. Und lassen Sie uns zuerst dieses Snippet generieren. Von React benötigen wir einige Hooks wie UC State und Use Effect. Und ist das vom Reaktor gefallen? Wir müssen Sie also für den Versand ausgewählt und verwendet haben. Sie haben Versand von reaktiviert ausgewählt und verwenden es. Also lasst uns auch diese Dinge mitbringen. Benutzter Selektor. Und du wirst auch dieses Axon brauchen. Das sind Phagen-Cocktails. Aus unserer Cocktailscheibe. Wir müssen zurück zum Redact-Ordner gehen, dann zum Features-Ordner, dann zum Come, dann Cocktail Slice. Und wir müssen die Phagen-Cocktails mitbringen. Und wir werden auch den Link vom React-Router nach unten verwenden . Bringen wir auch den Link mit. Reagiere auf Router dom. Und zuerst, was wir tun werden, zuerst werden wir mit Hilfe der von Ihnen ausgewählten den Status aus unserem Shop extrahieren . Du hast ausgewählt. Wir können das Diktat, das wir in unserem Code definiert haben, zum Extrahieren verwenden. Wir können so etwas machen. Hab ich nicht, denn unser Cocktail dafür ist mit dem App-Schlüssel registriert. Wenn Sie zur Store-Dot-JS-Datei zurückkehren. Okay, mit Hilfe dieses App-Schlüssels können wir den Status extrahieren, in dem wir unsere Cocktail-Slides definiert haben. Wir können also den Zustand aktivieren, sodass wir all diese Zustände extrahieren können , die wir in unseren Cocktails definiert haben. Cocktailfolien mit dem Ellbogen haben in unserer Cocktailschale eine JS-Punkt-Datei. Zum Anheben des Cocktails. Wir werden Cocktails brauchen. Okay? Und wir werden auch geladen werden müssen. Und wir müssen definieren, wann ein Staat noch da ist. Das wird also wie ein modifizierter Cocktail sein. Okay? Stellen Sie also einen modifizierten Cocktail ein. Dies wird die Eingabe D sein . Und lassen Sie uns auch die Referenz der riesigen Dispatch-Intuit-Versandvariablen speichern . Weil wir auch diesen Phagen-Cocktail Axon verschicken müssen . Und wir werden in dieser Phase versenden , der Block drinnen ist riesig. Also werden wir hier den Hughes-Effekt verwenden . Dies wird die Eingabe t sein. Das heißt, wir werden sie beim ersten Laden der Anwendung anzeigen. Immer wenn der Benutzer die Anwendung lädt, versenden wir diese Edge-Cocktails, okay? Und wir können auch überprüfen, ob es funktioniert oder nicht. Also geben wir Ihnen einfach eine Liste mit leichten Cocktails zum Lesen. Okay. Also müssen wir diese Cocktailliste auch hier in unseren Seitenordner bringen . Okay, also index.js, wir müssen die Cocktailliste mitbringen. Ihr könntet diese Komponente also automatisch für mich importieren. Und lass uns zum Browser gehen. Und jetzt können Sie sehen, dass wir alle Cocktails haben. Wir haben also etwa 25 Cocktails. Sie können sehen, dass wir alle Cocktails gekauft haben. Gehen wir also zurück zum Visual Studio Code. Und was wir jetzt tun müssen, müssen wir zuerst einen weiteren Nutzungseffekt schreiben. Weil wir hier einige Namen ändern werden. Sie können also sehen, dass wir hier einen seltsamen Namen haben. Getränke-Ausweis, wir haben Ausweis, trinkt, Leute. Ein paar Objekteigenschaften. Wir werden umbenennen. Okay. Also lasst uns das auch machen. Wir werden also noch einen Benutzer haben, und deshalb habe ich hier den modifizierten Cocktail-Status definiert. Dieser Benutzer soll nur laufen, wenn wir die Cocktailstunde zum Speichern haben. Dieser enorme Effekt würde sich auch entfalten, wenn diese Cocktails eine gute Abwechslung hätten. Okay? Also können wir hier nachschauen, aber wenn wir die Cocktails haben, dann können wir neue Cocktails haben. Und wir können die Cocktails einfach kartografieren , weil es eine Reihe von Objekten ist, die hier verwendet werden können. Wir können also die Kartenfunktion verwenden. Und vom Gegenstand aus werden wir einen Teil des Eigentums erkennen. Das Anwesen ist leicht, ordentliches Getränk. Okay. Also habe ich getrunken. Wir können Textur machen, dann STR Drink, dann FTR Drink, Tom, dann TR. Also gehe ich einfach und kopiere das Ding. Also dieser hier. Okay? Und STR-Klasse. Das ist die letzte Immobilie, die wir brauchen. Und danach werden wir diese Eigenschaft umbenennen , weil das ein bisschen komisch aussieht. Okay? Das wird also ein leicht hinzugefügter Ringname sein. Wir können ein FTR-Getränke-Image haben. Also das wird wie STR sein, drink, come in pull. Das wird der STR-Alkoholiker sein. Und ich freue mich, dass das STR und Glass sein werden. Sie können sehen, dass wir bei all diesen Namen sind. Deshalb, deshalb habe ich all diese Eigenschaften umbenannt. Wir können also den ID-Namen image1 für Glas verwenden. Dann können wir den modifizierten Cocktail den neuen Cocktails zuordnen. Okay. Also sonst drinnen, wenn wir keinen Cocktail haben dann ist das der modifizierte Proktor ins Unendliche. Okay? Und nutzen wir auch das Laden. Wenn Sie also das Laden haben, bedeutet das, dass unsere Daten unterwegs sind. Wir haben diese RTI Daten bis jetzt nicht erhalten. Bis zu diesem Zeitpunkt können wir die Ladung anzeigen. Okay, also eine Art Spinner, wir können Return anzeigen. Wir können hier mit dem Div-Klassennamen Painter leben. Ich kann wachsen. Okay. Das wird die Rolle haben. Hier verwenden wir im Grunde Material Design-Bootstrap-Datei, okay? Und wir können ein Span-Tag haben, bei dem der Klassenname visuell ausgeblendet ist. Okay? Und wir können hier wie das Laden und die Rückgabe drinnen haben. Und diesen können wir entfernen. Dies wird einen Container-Nachnamen haben. Dann werden wir einen anderen Klassennamen haben. Also werden wir heute hier das Material nach dem Klassennamen verwenden . Also Zeile, ich kann Spalten nennen. Ich füge eins an, dann row calls md Bindestrich drei, dann G Bindestrich vier. Und wir können hier diese modifizierten Cocktails verwenden. Du kannst deine Karte benutzen. Okay? Wir können einfach all diese Eigenschaften erfassen , die wir noch umbenennen haben ID, Name, Bild und Fogler vom Artikel. Also Artikel und wir können einfach ein Foto machen ID, Name, Bild, Glas. Und dann können wir einmal hierher zurückkehren. Und diese interne Rückgabe wird einen Klassennamen mit der Spalte haben. Okay. Und wir müssen den Schlüssel bereitstellen. Also wird er der Ausweis sein. Und dann werden wir die Platin mit dem Auto haben. Also ist das Auto Edge zufällig gleichzusetzen. Wir werden auf dem Bild mit der Klassennamenskarte den Bindestrich IMG oben haben . Okay? Und wir werden die Quelle definieren. Wir haben also bereits die Struktur, das Bild des Artikels und wir können den Namen haben. Okay? Und danach haben wir das Div mit dem Hauptteil der Klassennamenkarte. Okay? Und wir verwenden die Atlantik-Kacheln, also verteilter Text linksbündig, okay. Und im Div werden wir das h5-Tag mit dem Klassennamen, dem Kartentitel haben , okay. Und dieser Titel wird ihnen einen Namen geben. Okay? Und wir werden einfach noch einmal kopieren. Und das wird der Rand fruchtbar sein. Und das wird das Glas sein. Und wir werden ein P-Tag mit dem Text der Klassennamenskarte haben , okay? Und das werden wir tatsächlich in der Information haben, okay? Und danach werden wir eine Detailschaltfläche haben. Wir werden Link verwenden. Und wir werden einen Button haben, Button mit dem Klassennamen btn. In vier Minuten, okay? Und das wird Details haben. Und das führt im Grunde zur einzelnen Cocktail-Seite. Wenn Sie normalerweise daran interessiert sind, die Details zu diesem bestimmten Cocktail zu sehen , der bereits in unserer Datei app.js registriert ist. Wir haben hier also einen pädiatrischen spezifischen Weg, daher haben wir diesen Weg bereits abgelehnt. Das kannst du in unserer Datei app.js sehen, Cocktail, okay? Und wir müssen die ID angeben. Das ist also eine Cocktailliste. Wir können deinen Ausweis geben. Okay. Ich denke, wir sind fertig. Okay. Und wir können überprüfen, ob es funktioniert oder nicht. Gehen wir also in den Browser. Jetzt kannst du also sehen, dass wir den ganzen Cocktail, den wir auf unserer Homepage anzeigen können . Okay. Das funktioniert also gut. 25. Project 2 Cocktail App - Aktion zum Abrufen von Cocktail: Im nächsten Feature werden wir an der Anzeige eines einzelnen Cocktail-Lifts auf der Cocktail-Route arbeiten . Sobald der Benutzer also auf das Detail klickt, werden alle Details zu diesem bestimmten Cocktail angezeigt. Also lassen wir uns mit dieser Sache zum Visual Studio-Code zurückkehren. Um die Informationen über den einzelnen Cocktail anzuzeigen, müssen wir also die Informationen über den einzelnen Cocktail anzuzeigen, an dieser Datei arbeiten. Okay? Bevor wir also an dieser Datei arbeiten, müssen wir zuerst an der Cocktailscheibe arbeiten. Also hier müssen wir zuerst die Aktion schreiben. Was können wir hier tun? Also werde ich diesen einfach kopieren und einfügen. Weil nur diese Sache, wir werden diesen APA-Teil ändern müssen, okay? Ich füge einfach die API ein, die hier benötigt wird. Also das TPA, das wir verwenden werden, um den einzelnen Cocktail anhand der ID zu perfektionieren. Benennen Sie das ganze Ding zuerst um, okay? Dies wird der erste einzelne Cocktail sein, und lassen Sie uns den gleichen Typ ebenfalls umbenennen. Wir werden diese ID von unserer Komponente erhalten, also weniger als dieser Detektor, das ideale Licht auf diese Weise. Und wir müssen auch die drei versprochenen Lebenszyklen für diese Ax und Ay definieren . Also werde ich einfach das ganze Zeug kopieren und es einfach hier einfügen. Und wir müssen diesen umbenennen. Das wird also der Phagen-Single-Cocktail sein. Und in diesem Fall musst du auch auf ihre Getränke abzielen, okay. Und vergiss nicht, diesen zu ändern. Dieses Mal haben wir es also mit einem einzigen Cocktail zu tun, okay? Dieser Bereich wird also nur ein einzelnes Objekt enthalten, da dies die Antwort PER für die Anzeige der einzelnen Cocktailinformationen ist. Okay? Also nochmal, Sie müssen die Accent Dot Payload Dot Drinks ins Visier nehmen. Okay. Wir sind also mit der Logik in unserem Kontext fertig, Slight oder GAS für das Abrufen des einzelnen Cocktails. 26. Project 2 Cocktail App - Cocktail-Detailseite: Gehen wir also zu dieser einzelnen Cocktail-Punkt-JS-Datei. In dieser Datei müssen wir zuerst noch einmal etwas Hook reinbringen , wie du es noch einmal ausdrückst. Benutze den Effekt, okay? Und wir wollen auch eine Verbindung vom React-Router benötigen. Und wir werden auch die Perm besser verwenden müssen , weil wir gehen, wir werden die ID benötigen. Sobald der Benutzer auf Details klickt, also wenn Sie auf Details klicken, können Sie sehen, dass wir diese ID benötigen, okay? Das können wir also mit Hilfe von, ähm, Eltern bekommen. Und wir brauchen auch die Aktion, die wir gerade in unseren Cocktail-Folien eingeführt haben. Also müssen wir zum Redux-Ordner gehen, zehn Features, dann Cocktail Slice. Und wir können diesen ausgefallenen Einzelcocktail mitbringen. Und wir werden auch den gebrauchten Selektor benötigen und den Versand von React Redux verwenden. Von React Redux aus müssen wir also die Wahl verwenden, den Versand verwenden. Versand und Sie haben ausgewählt. Und noch einmal, ich brauche den Cocktail und die Ladung zum Teil von unserem Restore mit dem Ellbogen, wir haben den Selektor benutzt. Also gib an. Und mit Hilfe des Theta-Punkt-AB-Schlüssels können wir den Cocktail und den Ladezustandswert extrahieren. Und wieder müssen wir dieses Ding noch einmal definieren. Also werde ich einfach diesen Teil kopieren und ihn einfach hier einfügen. Denn auch hier müssen wir die bestehende Eigenschaft des Cocktails umbenennen die bestehende Eigenschaft des , weil diejenigen mit dem Namen Luke etwas seltsam sind. Wir müssen also einige der vorhandenen Eigenschaften dieses Cocktails umbenennen . Sie können also sehen, dass wir das alles haben, was wir jetzt sind. Wir werden einfach Hum umbenennen, von der bestehenden Eigenschaft dieses Cocktails, den wir wieder haben werden, diesen modifizierten Cocktail. Okay? Und wir haben die Referenz von Eurydice pet in einer Versandvariablen gespeichert . Und danach müssen wir diesen Page Single Cocktail zerstreuen. Okay? Dieser enorme Effekt ist also schon da, und sobald wir die ID haben, soweit ID, was wir tun können, können wir diese ID mit Hilfe von use erkennen. Was auch immer die Idee ist, die wir in einer URL haben, wir können anhand eines riesigen Musters erkennen, wo die ID läuft und dieses riesige Haustier erst, wenn wir die ID haben. Also können wir einen einzelnen Cocktail und wir können einfach die ID angeben, okay? Und Sie können sehen, dass diese Idee hier in unserer ersten Single-Cocktail-Action an Textur gewinnt. Gehen wir also zurück zur einzelnen Cocktail Dot JS-Datei. Und wieder müssen wir einen weiteren Nutzungseffekt schreiben. Dieser enorme Effekt tritt nur auf, wenn wir die ID haben. Und dann, okay, und auch hier werden wir die Länge des Cocktails überprüfen. Okay? Wenn Sie also einen gewissen Wert haben, bedeutet das, dass wir die Länge des Cocktails nehmen. Und wenn es größer als Null ist und das bedeutet, dass wir den Cocktail haben, Cocktail in unserem Gebietsobjekt. Und danach werden wir die Struktur hinter uns lassen. Einiges von der Sache. diktieren, wie hoch das Grundstück von diesem Cocktail ist, dieser Cocktailbereich mit Italien den einzigen Bereich des Objekts hält , weil dieser, weil dieser Cocktailfehler nur für die Anzeige der einzelnen Cocktail-Informationen verantwortlich sein wird . Das wird also nur ein einzelnes Bereichsobjekt enthalten. Also diesen Cocktail können wir auf den Nullindex bringen, weil er Bestand hat, weil er nur den einzigen Bereich des Objekts enthält. Und wir können uns das Ding wie STR vorstellen, trinken. Okay? Und wir können das in einen Namen umbenennen. Okay. Ebenso werde ich die Adjektiveigenschaft umbenennen , ähm. Okay? Also werde ich das alles einfach hier bezahlen. Ich benenne das ganze Anwesen um in FTR, drink that, drink. Um direkt eine E-Mail oder ein Alkoholiker an Informationen zu senden. Also all das existierende Immobilienobjekt an einem Tag, der hier benannt ist. Und wir werden auch diese Zutat verwenden. Bisher Zutat, was wir tun müssen. Also müssen wir eine neue Zutat definieren. Also Zutat, Zutaten. Und das wird das Array sein. Und darin werden wir alle Zutaten haben. Okay? Also die STR-Zutaten gefallen mir, ich werde eins nach dem anderen definieren. Okay? Und danach nehmen wir den neuen Cocktail rein, okay, den sogenannten neuen Cocktail, um das Namensbild zu haben, das Körperbild in der ganzen Kategorie. Also lasst uns diese Kategorie einordnen. Danach nehmen wir das Glas. Im Glas, dann Anweisungen, Zutaten. Okay. Dann können wir so machen, Cocktail zu einem neuen Cocktail umfunktionieren. Und wenn du die Cocktails nicht hast, dann mach es einfach, indem du den Cocktail auf Null änderst. Okay? Dieser riesige Effekt tritt also erst auf, wenn wir eine ID und ein paar Cocktailinformationen haben , okay? Und hier müssen wir nachschauen. Wenn wir keinen modifizierten Cocktail haben. Das heißt, wir können zurückkehren. hallo. Nett, hier zu taggen. Also zum Abschnitt Klassenname, Bindestrich, Titel. Und wir können einer Beschreibung Leben einhauchen, es gibt keinen Cocktail zum Ausstellen. Was wir hier tun können. Also können wir diesen einfach entfernen. Den brauchen wir nicht. Und drinnen werden wir zurückkehren. Sonst. Lassen Sie uns die Struktur des modifizierten Cocktails fertigstellen. einen modifizierten Cocktail benötigen wir Namen, Bild und Kategorie in vollem Glas. Anleitung und Inhaltsstoffe. Okay? Und hier können wir zurückkehren, zurückgeben, dass wir zuerst das Fragment verwenden können. Und wir können überprüfen, ob es eine Ladung gibt. Dann zeige ich den Spinner an. Okay? Also werden wir das Div mit dem Klassennamen spinner grow verwenden . Und mit diesem Status wird es eine Rolle spielen. Okay? Und darin verwenden wir das span-Tag mit dem Klassennamen, wobei Willie versteckt ist. Wir können Ihnen ein Live-Reloading geben. Die drei Punkte. Hier werden wir alle Informationen zu diesem bestimmten Cocktail anzeigen . Jetzt haben wir das Abschnitt-Tag mit dem Klassennamen, Fiction, Cocktail, Bindestrich, Wahl und das gesamte Styling mit diesem Klassennamen, den ich bereits in unserer Indexpunkt-CSS-Datei definiert habe . Okay? Sie können also sehen , dass Sie sich um diese CSS-Datei keine Sorgen machen müssen, da ich bereits den Link für die gesamte CSS-Datei bereitgestellt den Link für die gesamte CSS-Datei habe , die ich in dieser Anwendung verwendet habe. Darin werden wir fünf Links haben. Okay? Dieser Link hat also im Grunde die Schaltfläche Zurück. Und wir wollen Button, Buttonfarbe verwenden. Und wir verwenden einen Button mit dem Klassennamen btn, Bindestrich Gefahr. Und wir können etwas Inline-Styling geben. Also Marge, oben. Und das wird der Button-Wert sein, wird das Zurück sein. Okay? Und nach diesem Link werden wir das H2-Tag mit dem Klassennamen haben. Titel des Abschnitts. Okay. Nun, es wird einen Namen haben und wir werden einen anderen Klassennamen mit dem Getränk haben . In gefiederter. Ich werde das Bild-Tag verwenden, Quelle. Wir werden hier nur E-Mail verwenden. Bei Erwachsenen. Wir werden den Namen verwenden. Okay? Dann haben wir das Div mit dem Klassennamen und bringen die Informationen mit. Dann verwenden wir das P-Tag. Dann verwenden wir ein Span-Tag mit dem Klassennamen, drink, I open data. Und es ist ein bisschen der Name. Okay. Und ich bin froh, dass wir den Namen bekommen haben. Dieses Ding wird sich also wiederholen. Also werde ich dieses P-Tag einfach ein paar Mal kopieren. Also lasst uns ein bisschen herumkopieren, um Zeit zu sparen. Das wird also die Kategorie sein. Okay? Also können wir hier die Kategorie verwenden. Dies wird die Eingabe sein. Das wird also informell sein und das wird das Glas sein. Lassen Sie uns hier Glas geben. Und danach werden wir auch die Traktion haben. Das wird die Anweisung sein. Okay? Und im Großen werden wir die Zutaten ausstellen, okay? Das werden also ein bisschen andere Inhaltsstoffe , okay. Und lassen Sie uns diesen entfernen. Weil Zutaten, das zu haben. Okay, Sie können sehen, dass wir Zutaten im Array haben. Also, was wir hier tun können, damit wir es zum Kartografieren verwenden können, okay? Also Zutaten, keine Landkarte. Wir können Artikel und Index haben. Und wir können den Artikel einfach zurücksenden. Dann nutzen wir die Tanh-Zeit. Der Schlüssel. Wenn Sie keine Zutat haben, ja, ich gebe einfach die Null zurück. Und doch werde ich in dieser Zeit alle Zutaten ausstellen. Wir können diesen Artikel also verwenden und Sie müssen auch den Schlüssel angeben. Also wichtig hier, ich werde das Detail verwenden. Okay? Also ich denke, ich bin mit diesem einzelnen Cocktail so ziemlich fertig und ich denke, wir verwenden das Bild nicht. Also, wo ist das Bild-Tag? Okay, also hier wird es das Bild sein. Also lasst uns diesen aktualisieren. Wir sind also mit diesem einzelnen Cocktail fertig und gehen wir zum Browser und überprüfen, ob das funktioniert oder nicht. Also lasst uns auf das Detail klicken. Okay, wir haben also die Eigenschaft „Undefined“ gekauft, die nicht gelesen werden kann. Okay? Also, was wir hier tun können. Gehen wir also in den Browser. Lassen Sie uns zuerst eine religiöse Verpflichtung und klicken wir auf Details. Jetzt können Sie also sehen, dass wir diese Zutaten haben, okay. Und schauen wir uns auch die anderen Zutaten an. Sie können also auch auf diesen klicken. Sie können sehen, dass wir diese Namenskategorie für Glas haben , Zutaten in der Anleitung, all diese Informationen über diesen speziellen Cocktail, okay? 27. Project 2 Cocktail App - Cocktail suchen: Als Nächstes werden wir also am Wasserstoff, dem Cocktail und den Leitfäden arbeiten . Wir haben bereits ein wenig an unserer Sucheingabekomponente gearbeitet . Lassen Sie uns also diese Sucheingabekomponente vervollständigen. Gehen wir also zurück zum Visual Studio-Code. Also müssen wir zuerst die Aktion in unsere Live-Dot-JS-Datei für Cocktails schreiben . Also lasst uns diesen kopieren. Lassen Sie uns diesen umbenennen. Es wird also das Suchfeld zum Abrufen sein. Und lassen Sie uns diesen umbenennen. Okay, wir müssen auch diese API ändern. Dieses Mal werden wir also die dritte Komponente abrufen. Suchen Sie also nach Text und wir müssen diese APA ändern. Ich füge einfach die API ein, die für die Suche nach den Cocktails erforderlich ist. Also werden wir diese API verwenden, Wasserstoff, den Cocktail. Und wir müssen in unserem Reducer erneut drei Lebenszyklen für Versprechen definieren . Also werde ich einfach diese drei kopieren. Okay? Und fügen wir es hier ein. Und lass uns das in Phagen-Cocktail umbenennen , okay? Okay. Und wir werden den Zustand der Cocktails aktualisieren , okay? Weil es das kann, weil es mit diesem Hierarchiewert mehr als einen Cocktail ergeben kann . Okay? Also werden wir JD Dot Cocktails verwenden und wir müssen wieder darauf abzielen, dass nur Getränke verwendet werden. Okay? Wir sind also fertig mit der Logik in unserer Cocktail-Folie, Punkt-JS-Datei. Gehen wir also in die Sucheingabe-Punkt-JS-Datei. Darin werden wir Font Submit angeklickt haben. Beim Absenden. Du wirst den Gipfel im Griff haben. Und lassen Sie uns dieses Handle schnell definieren. Und mit diesem Namen werden einige die Veranstaltung erhalten. Damit wird nur ein E-Punkt die Standardeinstellung verhindern, okay? Und wir müssen den Onchange definieren. Unverändert wird sich der Griff ändern , um auch diesen zu finden. also mit Veränderung um und dieser Handle Change und dieser behandelten Änderung. Wir werden diese Strategie haben. Das heißt, da wir den Benutzer verwenden. Wir können also den Wert wie den aktuellen Wert von 30 Punkten erhalten. Okay? Und wir müssen die erste Aktion ausführen, die wir in unserer Punkt-JS-Datei für Cocktail-Slides erstellt haben. Also müssen wir zurück zum Redact-Ordner Funktionen, Cocktails Leben, und wir müssen diese Aktion, welche Suche Cocktail, bringen . Und wir werden es auch hier brauchen. Sie werden von unserem React-Redux aus versenden , um die Aktion zu verunglimpfen. Zuerst, bevor die Aktion ausgelöst wurde , wurde die Referenz der riesigen Disparität in der Versandvariablen gespeichert . Und hier können wir versenden, okay. Also Seite und wir können Berührungen zerstreuen. Okay. Und wir müssen auch noch ein paar Investitionen in unsere Datei index.js tätigen. Und wir rufen manchmal an, wenn Sie den Cocktail nicht bekommen , indem den Wert in die Suche nach Besuchern eingeben, dann müssen Sie in diesem Fall einige Inhalte anzeigen. Okay? Gehen wir also zuerst in die Datei index.js. Datei Index.js, in der wir die gesamte Cocktailliste heraussuchen. Wir müssen also zu dieser Komponente der Cocktailliste zurückkehren. Und hier müssen wir nachschauen, als ob wir die Cocktails nicht haben. Okay? Dann kehre einfach mit einigen Methoden zurück. Die Methode wäre quasi nein, entspricht deinen Kriterien, okay? Und wir können überprüfen, ob es funktioniert oder nicht. Gehen wir also zurück zum Browser. Aktualisieren Sie diese Anwendung. Denken wir mal, hat dir bei dem Cocktail den Namen Adam gegeben. Sie können sehen, dass wir nur den Cocktail mit dem Schlüsselwort Adam haben . Und Sie können sich auch die Informationen zu diesem speziellen Cocktail ansehen . Und es Go Back funktioniert auch. 28. Projekt 3 Einkaufswagen – App-Demo: Hallo zusammen und willkommen diesem Abschnitt, in dem wir lernen werden, wie wir durchführen können mit dem Reader-Toolkit in der React-Anwendung alle Arten von Warenkorboperationen . Und wir werden hier auch Redux Persist mit dem 3D-Toolkit verwenden , um den Artikelwert im Warenkorb beizubehalten. Wann immer Sie die App umformulieren, wird der Wert an sich sein. Lassen Sie uns also eine kurze Demo dieser Anwendung machen , an der wir in diesem Abschnitt arbeiten werden. Das ist also unser Einkaufswagen. Und wenn Sie die Menge erhöhen, können Sie sehen, dass die Summe hier aktualisiert wird. Und die Community in unserem Knorpel wird ebenfalls aktualisiert. Also wird überall aktualisiert. Immer wenn Sie die Menge aktualisieren und die Menge verringern. Das funktioniert also auch. Sie können sehen, dass unsere Kartenanzahl aktualisiert wird und dass dies unerwünscht ebenfalls aktualisiert wird. Sie können das Produkt auch aus dem Warenkorb entfernen. Wenn Sie also auf dieses Symbol klicken, wird dieser Artikel aus unserem Warenkorb entfernt. Und der Gesamtbetrag wird aktualisiert, und die Menge wird ebenfalls aktualisiert. Sie können den Artikel auch von dieser Karte entfernen , wenn Sie erneut darauf klicken, da wir nur eine Menge haben. Und wenn Sie erneut auf diesen Abwärtspfeil klicken , wird er auch auf diese Weise von diesem Auto entfernt. Sie können den Warenkorb auch leeren , indem Sie auf diese Schaltfläche klicken. Sie können sehen, dass wir jetzt die Eingabe t softcodiert haben. Und wenn Sie den ganzen Artikel noch einmal abrufen möchten, dann klicken Sie für Ihr Projekt auf diesen Button. Und wieder können Sie den gleichen Vorgang ausführen, z. B. die Menge erhöhen oder die Menge verringern. Und dieser gesamte Wert wird aktualisiert. Also werden wir mit Hilfe des Frieda-Toolkits eine andere, andere Redoxreaktion schreiben . Und wir werden auch die gesamte Einkaufskarte beibehalten. Wenn Sie also diese Anwendung aktualisieren, damit Sie sehen können, dass unser Einkaufswagen hier dauerhaft ist, also weiterhin, verwenden wir den Redux-Prozentsatz. Sie werden also auch lernen, wie Sie Paradox Persist mit dem Editor-Toolkit in dieser React-Anwendung verwenden . Das ist also die Gesamtanwendung , die wir in diesem Abschnitt erstellen werden. Ich sehe Sie also im nächsten Video , in dem wir unser Herzprodukt einrichten werden. 29. Projekt 3 Einkaufswagen – Einrichtung: Leute, ich werde hier ein Projekt erstellen. Ich bin also in diesem Verzeichnis. Also werde ich ein Terminal öffnen. Und lassen Sie uns ein Projekt und die Vx Create React-App erstellen. Und mein Projektname wird Einkaufswagen sein. Okay. Das wird also mein Projektname sein. Und warten wir auf die Projekterstellung. Es dauert etwa zwei bis 3 Minuten bis dieser Vorgang abgeschlossen ist. Also komme ich zurück. Sobald dieser Vorgang abgeschlossen ist. Umfragen, unser Projekt-Setup ist jetzt abgeschlossen. Gehen wir also zuerst in diesen Ordner, der Warenkorb ist. Und wir müssen einige Pakete installieren bevor wir mit der Arbeit an dieser Anwendung beginnen. Also werden wir das MDB React UI Kit verwenden. Um an unserer Komponente zu arbeiten. Wir müssen das Toolkit redigieren. Wir brauchen auch React Redux. Wir brauchen auch das Redox. Und wir müssen auch Ihre Kanäle bestehen lassen, weil wir unseren Warenkorbartikel beibehalten werden. Warten wir also auf die Paketinstallation und ich komme ein Zwölftel des installierten Pakets zurück. Also Leute, unsere Pipette Cortisol. Also lass uns das zuerst machen. Und Kenneth Clark und ich haben dieses Projekt bereits in meinem Visual Studio-Code geöffnet . Gehen wir also zum VS-Code. Sie können sehen, dass ich das Projekt in meinem VS-Code geöffnet habe. Also müssen wir diese Pakete installieren. Toolkit, react, redox, redox, redox persist und MDB reagiert auf Sie. Ich könnte. Und unsere Anwendung wird in den Browser und unser Projekt geladen den Browser und unser Projekt und wurde erfolgreich in den Browser geladen. Gehen wir nun zuerst zum VS-Code. Und lass uns zuerst etwas aufräumen. Also brauchen wir diesen nicht. Okay. Und geben wir vorerst den Einkaufswagen, okay. Wir brauchen dieses Logo nicht, also lassen Sie uns dieses entfernen. Lassen Sie uns diese Datei löschen. Lassen Sie uns unsere index.js einfügen und hier ist es in Ordnung. Und lassen Sie uns eine Datei und einen Ordner erstellen. Wir werden also einen Redex-Ordner haben. Und wir werden hier eine Datei haben. Also werden wir Navbar NodeJS haben. Wir werden eine Navigationsleiste haben, einen Kartencontainer. Und wir nehmen unseren Artikel und fügen Redux ein. Wir werden ein Geschäft haben, das eine Mautstraße hat. Und Sie werden eine Ordnerfunktion haben. Im Inneren des Features werden wir unsere Folien haben. Wir haben es mit dem Einkaufswagen zu tun, also wird es Slice, Slice Dot J sein. Okay? Gehen wir zur Datei app.js und überprüfen wir, ob dieser Tinnitus reflektiert wird oder nicht. Da wir hier ein Materialdesign-Bootstrap verwenden. Also müssen wir eine CSS-Datei für unseren Tab Material Design mitbringen . Ich füge die CSS-Import-Anweisung oder das Material hat den Club nicht bewegt ein. Also dieses, wir müssen es hier einfügen. Wenn Sie jetzt zum Browser gehen, können Sie sehen, dass es Change heißt. Das bedeutet, dass wir Material Design Bootstrap in unserer Anwendung erfolgreich konfigurieren konnten . 30. Projekt 3 Einkaufswagen – RTK konfigurieren: Jetzt konfiguriere ich das Reader-Toolkit in dieser Anwendung. Dann werden wir mit der Arbeit an dieser Komponente beginnen, bei der es sich um den ID-Kartencontainer für den Navbar Cart handelt. Also werde ich mit der Konfiguration des Redact-Toolkits in dieser Anwendung beginnen . Gehen wir also zur JS-Datei mit Schrägstrich im Warenkorb. Und du musst kreatives Leben einhauchen. Reduziere das Toolkit, erstelle Folien. Wir brauchen. Und danach haben wir unser Slice, Slice, vordefiniert. In Scheiben schneiden. Wir haben einen vordefinierten Namen, also wird es eine Karte sein. Okay? Dann müssen wir den Anfangszustand unserer Anwendung definieren. Also werde ich Gegenstände haben. Im Grunde wird es also den gesamten Produktartikel enthalten. Also wähle ich einen Datenfehler unter dem Quellordner aus. Also diese Datendatei brauchen wir hier unter dieser Quelle, okay. Es enthält also vier Produkte mit Titel, Preis und Menge. Also stelle ich zunächst die Menge auf eins ein. Das ist also die Menge. Okay? Gehen wir nun zu den Karten wie der JS-Datei und wir müssen die Datendatei hierher bringen. Wir importieren Daten und können an diesem teilnehmen. Okay? Also zuerst werden wir, also das vierte Produkt auf unserer Seite, danach haben wir den Gesamtbetrag, okay? Es wird zunächst Null sein und die Gesamtzahl wird gezählt. Dies wird ebenfalls Null sein. Und wir werden einen Reduzierer haben , in den wir unseren aktuellen Wert schreiben werden. Am Anfang wird es Empathie sein. Lassen Sie uns diese Folie exportieren. Die Standardeinstellung für den Export. Cart Slice, Lektüre gelehrt, sagte, Okay. Gehen wir nun zu dieser Store-Dot-JS-Datei. Und hier müssen wir morgen dein Garagentor bringen. Toolkit redigieren. Aus dem Redact-Toolkit müssen wir den konfigurierten Store mitbringen. Jetzt müssen wir auch unseren Cart Reducer von diesem Feature Folded Card Slice mitbringen unseren Cart Reducer von . Danach müssen wir unseren Shop im Grunde exportieren. Also Cones Door Configuration Store. Und wir werden einen Reduzierer haben. Also greifen wir mit der Schlüsselkarte im Grunde auf den Status zu, den wir in der Light- oder JS-Datei dieser Karten definiert haben in der Light- oder JS-Datei dieser Karten definiert . Also ordnen wir diesen Einkaufswagen zu und reduzieren ihn auf das Auto. Unsere Store-Konfiguration ist also abgeschlossen. Und jetzt müssen wir für diesen Store urteilen, den Export-Standardspeicher. Und im letzten Schritt müssen wir einige Konfigurationen in unserer Datei index.js vornehmen. Von React Redux aus müssen wir zuerst den Anbieter heranziehen. Bringen wir also den Anbieter um unsere React-Anwendung mit Redex zu verbinden. Und wir können einfach diese App-Komponente einsetzen, zwar diesen Anbieter. Und diese Tour müssen wir auch mitbringen. Gehen wir zu diesem Ordner. Und diesen Verlauf können wir unserem Anbieter zur Verfügung stellen. Speichern wir diese Datei und überprüfen wir, ob unser Reader liquidus es uns ermöglicht, es vollständig zu konfigurieren oder nicht. Gehen wir also zum Browser. Wir haben keinen Fehler. Das bedeutete also, dass zwei Liquidus erfolgreich konfiguriert wurden. Du kannst auch anhand der Reduzierung duktil überprüfen, ob du ein großes DevTools in deiner Chrome-Erweiterung hast . Wenn du diesen öffnest. Jetzt können Sie sehen, dass wir unseren Ausgangszustand haben. Sie können sehen, dass wir ein Produkt in diesem Artikel haben. Also okay, das bedeutet, dass wir unser React-Toolkit in dieser React-Anwendung erfolgreich konfiguriert haben. Konfigurationsteil des Reduct-Toolkits ist also noch abgeschlossen. Jetzt beginnen wir mit der Arbeit an einer Komponente nach der anderen. Also beginnen wir zuerst mit der Arbeit an unserer Navbar Dot JS-Datei. 31. Projekt 3 Warenkorb - Navbar: Jetzt fange ich mit dieser Navbar-Komponente an. Also weniger eingerichtet als dendritischer Schnipsel hier drüben. Okay? Und in app.js werden wir unsere Navbar-Komponente und den Kartencontainer haben. Okay? Lassen Sie uns also daran arbeiten und wir können unsere Nummer kompetent nur anbieten. Speichern wir diese Datei zuerst. Und dann können wir diese Navbar mitbringen. VS-Code importiert diese Komponente also automatisch. Sie können diesen überprüfen. Sie können also sehen, dass es funktioniert. Gehen wir nun zu dieser Nachbarkomponente. Und hier müssen wir einige Komponenten aus unserem Materialdesign-Bootstrap von MTV React UIKit mitbringen . Wir müssen MDB, MDB-Container, MDB, MDB, Navbar-Link, MDB, Navbar-Marke und MDB-Abzeichen mitbringen MDB, Navbar-Link, MDB, . Okay? Das ist also alles, was wir brauchen. Danach, was wir tun müssen. Also müssen wir uns auch einen Selektor und einen riesigen Dispatch von unserem React besorgen , um als Nächstes zu tun. Bringen wir das Ding zuerst mit. Wir haben bereits den Anfangszustand innerhalb dieser Warenkorblien definiert . Also können wir diesen Zustand behandeln, okay? Drittens unsere Navbar Dot JS-Datei. In der Navigationsleiste haben wir also oben rechts eine Einkaufstasche. Okay, da haben wir also zwei. Also die Gesamtzahl. So können wir den Statuswert mit Hilfe einer riesigen Auswahl ablesen. Und wir haben den Reduzierer mit der Schlüsselkarte erkundet. Okay? Wir können akzeptieren, dass der staatenlose Staat im Dunkeln erwischt wird. Und wir können die Gesamtzahl erfassen. Ab sofort wird es nur Null sein. Lassen Sie uns also an dieser Navbar-Komponente arbeiten. Ich werde hier Fragment verwenden. Und ich werde die IMDB-Nummer verwenden. Und hier wird es erweitert. Allergie dunkle Farbe. Ich gebe dir die Grundschule. Okay. An dritter Stelle steht die IMDB-Nummer. Ich werde einen IMDB-Container haben. Und dann werden wir die IMDB-Navbar-Marke haben, okay? Und hier können wir quasi eine Redox-Toolkit-Einkaufskarte verschenken. Okay. Und in der Therapie müssen wir sie bestehen. Beim Styling gebe ich ein Styling wie eine Linie. Das Objekt wird zentriert sein. Lassen Sie uns das ausstellen. Lassen Sie uns dem Display Flexibilität geben und den Abstand zwischen den Inhalten rechtfertigen. Speichern wir diese Datei und wir können diese Änderungen überprüfen. Ihr könnt also sehen, dass wir diese bekommen, unsere nette Navbar. Danach werden wir MDB haben, jetzt Berlin. Und dann verwende ich hier ein Tag mit dem Klassennamen MX, Bindestrich drei. Bei Italien verwende ich hier den Bootstrap-Klassennamen. Und wir können ein MDB-Symbol haben. Und ich werde die Font Awesome-Symbole verwenden. Also muss ich ein Stylesheet hinzufügen, um den Font Awesome zu aktivieren. Dieser Zustand der Firstkachel ist also erforderlich, um den einen Rumpf zu aktivieren. Und in diesem MDB-Symbol werden wir MDB schlecht haben. Okay, lassen Sie uns einen Teil des Gewinns an Faradays MDB-Symbol weitergeben. Wir verwenden also das Font Awesome-Symbol. Und ich kann Ausrüstung benutzen, um hier die Tauschkarte zu benutzen. Okay? Die Größe wird groß sein. Und Farbe werde ich hier verwenden , richtig. Jetzt ist darin der MDB-Wert enthalten. Wir müssen diesen Drop bereitstellen. Farbe ist die Gefahr , die Rot verstärkt. Benachrichtigung, tut mir leid, es wird sogar eine Benachrichtigung geben. Und wir müssen bei jeder Fliese etwas ins Landesinnere geben. Und ich gebe der Schriftgröße 12 Pixel. Und hier sind wir damit, zumindest die Gesamtzahl anzuzeigen, okay? Und wir können überprüfen, ob es funktioniert oder nicht. Gehen wir also in den Browser. Jetzt können Sie sehen , dass es funktioniert. Wir können diesen Nullwert aus unserem Shop ablesen. Und derzeit haben wir keinen Artikel im Warenkorb, also geht es gegen Null. Unsere Navbar ist hier also kompliziert. Und ich denke, diese große Ungleichheit ist nicht erforderlich. Aber lassen Sie uns diesen entfernen. Der Navbar-Teil ist also hier abgeschlossen. Jetzt werden wir an unserem Wagencontainer arbeiten. 32. Projekt 3 Warenkorb – Warenkorbdesign: Jetzt fange ich an, an dieser Kartencontainer-Komponente zu arbeiten . Also lass uns ein paar Ausschnitte hierher schicken. Also müssen wir zuerst eine große Wirkung erzielen, okay? Und auch hier benötigen wir eine riesige Auswahl an Versand und Nutzung aus unserer Reaktion auf diesen riesigen Selektor auswählen. Normalerweise Versand. Und wir mussten einige Komponenten aus unserem Material zum Bootstrap mitbringen . Die Komponente, die wir hier benötigen, MDB, MDB-Symbol. Okay? Für den beiden kompetenten Personen erforderlich Import von unserer Materialdesign-Reise sind also nur diese beiden kompetenten Personen erforderlich. Und hier, was wir tun müssen. Also müssen wir zuerst einen Zustand extrahieren , den wir in unserem System haben und den wir in unserer JS-Datei mit Schrägstrichen im Warenkorb haben. Verwenden wir den hier verwendeten Selektor. Und wir können den Staat mit der State Dot Card verlassen. Also brauchen wir hier Artikel und Gesamtbetrag. Okay? Nun, was wir tun müssen. Also lasst uns diesen entfernen. Ich werde jedes Fragment sein. Und wenn du die Gegenstände hast, werde ich löten. Also, was ich jetzt tun werde. Also zuerst werde ich jetzt dein H2-Tag mit dem Klassennamen als Hauptbindestrich, md, Bindestrich, md Bindestrich zwei verwenden dem Klassennamen als Hauptbindestrich, md, Bindestrich . Und ich gebe dir eine Überschrift wie deinen Einkaufswagen. Jetzt haben wir vier Produkte in diesem Artikel. Also werde ich diese Komponente in diesem Kartencontainer verwenden . Also werde ich hier vorerst nur einen Ausschnitt generieren. Ich werde später arbeiten. Okay? Und hier haben wir das Item, also Items, Dotmap-Item. Und wir können hier unseren Warenkorbartikel zurückgeben. Okay? Der VS-Code importiert diese Komponente und diesen Schlüssel automatisch. Ich gehe zum Pfad der Artikelpunkt-ID. Und ich verteile die Höhe nach unten. Also dieser Materialdatenpunkt ist der Inhaltstitel, der Preis. Er hat ihn in Tokio gemacht. Speichern wir also diese Datei und gehen wir in den Browser, um diese umzudrehen. Diese Komponente bedeutet also nicht, dass wir wirklich zu unserer Datei app.js gehen und diese Kartencontainer-Komponente mitbringen müssen. Speichern wir diese Datei. Gehen wir jetzt zum Browser. Jetzt können Sie also sehen, dass diese Warenkorbartikelkomponente hier gerendert wird. Wir haben also vier Elemente in der Datenpunkt-JS-Datei. Es rendert also für Zeit. Okay? Danach müssen wir an dieser Dot-JS-Datei für den Warenkorbartikel arbeiten . Jetzt fange ich an, an dieser Komponente für den Warenkorbartikel zu arbeiten . Also hier müssen wir den Hughes-Effekt einsetzen. Und wieder müssen wir diese beiden Dinge mitbringen. Es gibt also zwei Dinge, die wir mitbringen müssen. Ich werde es auch hier verwenden. Also lass uns herbringen. Okay, lassen Sie uns jetzt diesen entfernen. Und ich werde dein Inline-Styling verwenden. Also verwende ich hier 70 und die Breite anzeigen, okay? Maximale Breite, ich verwende hier 90, dann liegt sie innerhalb des Randes mit doppelten Anführungszeichen. Ich gebe dir ein Nullpixel und das Auto. In diesem Div werde ich jetzt ein weiteres Div mit dem Klassennamen haben. Ausleihen. Auch hier werde ich etwas Inline-Styling haben und wieder werde ich etwas Inline-Styling haben. Marge. Oben. Es werden also zehn Pixel sein. Okay, lassen Sie uns das formatieren. Und in diesem Div werde ich ein weiteres Div mit dem Klassennamen haben. Alle Bindestriche SM Bindestrich bis. Dieser Komplex wird Requisiten erhalten, weil wir den ganzen Artikel auf diese Weise verteilen. Es wird hier also Requisiten wie ID, Bild, Titel, Preis und Betrag erhalten . Also werde ich ein Image-Tag verwenden. Im dritten Gedanken kann ich dieses Bild zur Verfügung stellen und alternativ kann ich Ihren Titel angeben. Ich werde hier bei LastName Image Fluid verwenden. Und der Stil, den ich hier verwenden werde, Object Fit, Cover. Lassen Sie uns diesen formatieren. Ich nehme Breite und Höhe. Ich werde nur meine besten Jahre haben. Okay? Jetzt, nach diesem Band, werde ich noch einen Tag mit dem Spaltenbindestrich sm Bindestrich zwei haben. Und ich werde den Spielraum als Requisiten bereitstellen. Und hier werde ich das H5-Tag haben. Darin werde ich einen Titel haben. Lassen Sie uns das vorerst überprüfen, ob es funktioniert oder nicht. Gehen wir also zum Browser. Jetzt können Sie also sehen, dass wir den For-Artikel zusammen mit dem Mediantitel anzeigen können . Jetzt, nach diesem H5-Tag, werde ich noch ein H5-Tag haben. Und das wird der Preis sein. Okay? Und hier werde ich etwas Farbe geben. Also die Farbe, die ich hier verwenden werde, ist 61, 70, 98. Okay, lass uns sehen, wie es aussieht. Unsere Preise werden also schon angezeigt. Jetzt werde ich hier ein Symbol haben, das MDB-Symbol. Und ich werde doch Font-Awesome verwenden. Und das wird der Entwurfssymbolstil sein, den ich hier mit dem Zeiger und der Farbe versehen werde . Ich gebe dir nur ein rotes. Und diese MDB habe ich mit einem Self-Close konvertiert. Okay? Jetzt, nach dieser Tabelle, werde ich ein weiteres Div mit dem Klassennamen fn bei ihnen haben . Ich hab's gefunden. Und wieder werde ich die IMDB verwenden. Ich kann aber nur. Es wird wie Pfeil hoch sein. Okay? Also werde ich es hier in der Nähe von Chevron verwenden. Und wir können diese Farbe entfernen, ist hier nicht erforderlich. Und dann zeige ich hier den Betrag , für den ich das P-Tag verwenden werde . Und darin werde ich den Betrag aufteilen. Und ich gebe ihnen eine Linie, wenn der Rand oben kachelig ist, es werden zehn Pixel sein. Und danach werden wir auch den Pfeil nach unten drücken , um die Artikelmenge im Grunde zu verringern. Und das wird im Grunde die Artikelmenge erhöhen. Das wird also runter sein, Chevron runter. Und ich denke, das war's für heute. Wir können überprüfen, ob es funktioniert oder nicht. Gehen wir also in den Browser. Es funktioniert also. Sie können sehen, dass wir einen Pfeil nach oben, einen Pfeil nach unten oder eine Förderung oder Verringerung der Artikelmenge haben oder eine Förderung oder Verringerung . Also jetzt haben wir hier zwei. Also auch die Gesamtsumme. Wir müssen weiter an dieser Kartencontainer-Punkt-JS-Datei arbeiten . Danach werde ich Wasser trinken. Und wir werden eine horizontale Linie haben. Dann was das Etikett angeht. Also werde ich für das Millennia-Styling sorgen. Es wird also so sein, als würde man Inhalte anzeigen, anpassen und rechtfertigen. Gleichmäßig verteilen. Und der rechte Rand beträgt 50 Pixel. Und hier werde ich das Total Total Span Tag haben. Und wir können hier den Gesamtbetrag sehen. Und das wird in D eingegeben. Okay, also lass uns das in ein Div einfügen. In diesem Div werden wir MDB haben, übrigens. Jetzt, in diesem MDP mit ihm, werde ich ihnen Aufforderungen geben, also farbig. Es wird eine Gefahr sein. Auf einen Klick werden wir haben. Also werden wir den onClick später definieren. Lassen Sie uns diesen vorerst entfernen. Und wir werden jedes Plättchen haben. Für eine typische Zelle wird es also Breite eins sein. Okay? Und wir werden eine Margenobergrenze haben. Es werden also 50 Pixel sein. Der Button ist wertvoll bei einer durchsichtigen Karte. Sie können auch den gesamten Artikel aus dem Auto entfernen. Also lass uns diese Datei speichern und lass uns in den Browser gehen. Jetzt können Sie sehen , dass es funktioniert. Und derzeit ist die Nachfrage gleich Null. Dieser Wert ist ebenfalls Null , da wir keine Aktion definiert haben , um diesen ganzen Wert zu aktualisieren. Okay? Jetzt beginnen wir mit der Arbeit an jeder Hydrodissektion um die Menge zu erhöhen oder verringern oder den Artikel aus dem Warenkorb zu entfernen. Oder wenn Sie möchten, dass alle Artikel auf der Karte entfernt werden, können Sie dies auch tun, indem Sie auf diese Schaltfläche klicken. Wir müssen die Aktion für jede Operation definieren. Bisher werde ich Action schreiben, um die Gesamtsumme des Warenkorbs zu erhalten. Wir haben für jedes Produkt einen bestimmten Betrag, daher wollte ich die Summe dieser Karte zeigen. Okay. 33. Projekt 3 Warenkorb - Gesamt-Aktion zum Warenkorb: Lassen Sie uns also mit der Arbeit an unserer Readact-Toolkit-Aktion beginnen. Jetzt werde ich eine Toolkit-Aktion schreiben um den Gesamtwert des Warenkorbartikels zu ermitteln. In diesem Reduzierer. Ich werde diese Redoxreaktion haben. Also nehmen wir ein Maximum und ein Licht und rechnen den Einkaufswagen zusammen, okay? Eins davon, nur einen Staat zu haben. Und doch, wann eine Variable definiert werden soll, aufgelistete Elemente. Also werde ich die Hotelanzahl und die Gesamtzahl texturieren. Und ich werde die Methode noch reduzieren. Sie also die Reduce-Methode mit Italien Führen Sie also die Reduce-Methode mit Italien eine Operation für alle Array-Elemente aus und es wird ein einzelner Wert basierend auf diesem Array erzeugt. Also hier habe ich die Warenkorbsumme und den Warenkorbartikel. Okay? Und dann vom Warenkorbartikel werde ich diesen Preis und Betrag haben. Okay. Dann kostete Artikel, Gesamtpreis und nahm sie alle. Also wende ich hier nur einfache Mathematik an, um den Wert von Quota Lighter zu berechnen. Und dann Karren. Gesamtbetrag ist gleich also plus ist gleich der Summe. Und das Gleiche werde ich auch für unsere Gesamtzahl tun. Also Warenkorb, Summe, Gesamtzahl und Betrag, okay? Darunter ist nichts als Quantität, okay? Dann können wir die Summe zurückgeben. Okay? Jetzt müssen wir auch den Anfangswert angeben. Gesamtbetrag und die gefundene Summe, es wird Null sein, sind also eins. Und danach müssen wir unseren Gesamtbetrag und die Gesamtzahl aktualisieren. Nehmen wir an, unser Gesamtbetrag entspricht , dass ich eine Rolle in Ziffern spiele und ihm sagen, dass er das Problem beheben soll. Also werde ich einfach den Gesamtbetragswert auf 22 Dezimalstellen korrigieren . Und das ist es nicht. Die Gesamtzahl entspricht der Gesamtzahl. Okay? Das ist also abgeschlossen. Jetzt müssen wir diese tatsächliche Exportkonstante exportieren. Und es bezieht sich auf die Kartenfolie und die tatsächliche Kartensumme. Jetzt können wir diese Aktion hier in der Punkt-JS-Datei des Kartencontainers verwenden . Wir müssen also unseren Nutzungseffekt verwenden. Und wir müssen zuerst die Referenz der Einheit in eine Versandvariable aufteilen. Nur dann können wir an diesem Akzent verzweifeln. Also Versand, Einkaufswagen holen, insgesamt. Also hat mir der VS-Code automatisch diese Redex-Aktion vorgeschlagen. Es wird automatisch importiert. Wenn es für dich nicht automatisch wichtig ist, musst du es manuell importieren. Gehen wir also zum Browser. Jetzt können Sie sehen, dass wir die Gesamtmenge dieses Produkts sehen können , was korrekt ist. Also die Gesamtmenge des Produkts zur Senkung des Herzviertels. können Sie hier sehen, denn zu Beginn ist unsere Warenkorbartikelmenge eins, okay? Das ist also abgeschlossen, okay? 34. Projekt 3-Warenkorb -Aktion erhöhen, verringern und entfernen: Jetzt müssen wir die nächste Aktion definieren , um das aktuelle Element zu erhöhen. Wenn Sie also auf diesen Pfeil klicken, wird er vergrößert. Und der Preis wird zusammen mit diesem Warenkorbwert ebenfalls aktualisiert. Definieren wir also zunächst die Aktion zur Erhöhung der Artikelmenge. Also definiere ich hier die Aktion in Grau, die Artikelmenge im Warenkorb. Also hier werde ich zugenommen haben und ich werde bei der Aktion geblieben sein. Und dann werde ich eine Zustandspunktkarte haben , Items, Punktkarte. Ich werde einen Gegenstand haben. Und wir müssen überprüfen, ob Artikelpunkt-ID mit der Aktionspunkt-Nutzlast übereinstimmt. Nutzlast. Nichts außer es wird die ID sein. Ich kann also Punkt parallel enthalten, der die Idee enthält, dass wir von unserer Komponente aus senden werden. Also wenn es riecht und dann müssen nur wir die Menge erhöhen, okay? Also in dem Fall, was wir tun müssen, eine Rückgabe, ich werde den Artikel einfach verteilen und wir müssen nur die Menge Artikel Punkt m plus eins aktualisieren . Und wir können den Artikel zurückgeben. Das wird also berechnet. Jetzt müssen wir diese Aktion ausführen. Also Datei exportiere diesen. Und wir können diesen in unserer Dot-JS-Datei für den Warenkorbartikel verwenden. Also noch einmal, wir nähern uns dem Unterschied der normalerweise in eine Versandvariable aufgeteilt wird. Nur dann können wir eine Aktion starten. Das ist also Chevron up. Das heißt, wir können die Artikelmenge erhöhen, den Onclick müssen wir hier bereitstellen. Und ich werde diesen Anstieg an Epsilon zerstreuen. VS-Code schlägt also automatisch mit dieser Aktion vor. Und ich werde den Ausweis weitergeben, dass ich Jahr andere Requisiten von unserer Kartencontainer-Komponente erhalte . Speichern wir diese Datei und gehen wir zum Browser. Aktualisiere diesen. Nun, wenn wir diesen erhöhen. Sie können also sehen, dass dies zunimmt, aber unsere Karte und diese Kartenanzahl werden nicht aktualisiert. Was wir also tun müssen, also müssen wir im Grunde einige Änderungen an unserem Wiederverwendungseffekt vornehmen. Diese Aktion wird also immer versendet, wenn sich die Menge ändert. Also können wir die Elemente in dieser Abhängigkeit übergeben. Also wann immer Änderungen im Items-Array vorgenommen werden, wird das im Grunde genommen ausgelöst, okay? Und wir erhalten den aktualisierten Gesamtartikelwert zusammen mit der Gesamtmenge. Gehen wir also in den Browser und aktualisieren diesen. Lassen Sie uns nun die Menge erhöhen. Wie Sie sehen können , wird es aktualisiert. Und doch wurde es auch auf fünf aktualisiert. Sie können sehen, dass es aktualisiert wird. Als Nächstes werden wir im Grunde die Funktionalität implementieren, z. B. das Produkt aus diesem Warenkorb entfernen. Im nächsten Abschnitt werden wir nun versuchen, das Produkt aus unserem Warenkorb zu entfernen. Also können wir es hier tatsächlich versuchen. Wir werden uns also zurückgezogen haben und wir werden einen Staat mit Maßnahmen haben. Und geben Sie Punktartikel und staatliche Chargenartikel an. Punktfilter Wir werden Ihren Artikel haben. Und wir müssen hier die grundlegende Logik schreiben, zum Beispiel, wenn die Punkt-ID des Artikels nicht mit der Idee übereinstimmt , die wir von der Komponente erhalten, dann müssen wir all diese Artikel behalten und diese bestimmten Artikel aus dem Warenkorb entfernen. Dadurch wird der Artikel herausgefiltert, Einkaufswagen kommt heraus. Und lassen Sie uns diesen exportieren. Jetzt können wir diese Aktion in unserer Dot-JS-Datei für den Warenkorbartikel verwenden . Also hier werden wir onclick haben. Den können wir einfach verschicken. Entfernen Sie den VS-Code, der in diesem Abschnitt automatisch vorgeschlagen wird. Und wir können den Ausweis weitergeben. Gehen wir in den Browser. Dieser. Und wenn Sie auf dieses Löschsymbol klicken , wird es gelöscht, der Warenkorbwert wird aktualisiert. Diese Warenkorbmenge wird ebenfalls aktualisiert. Das funktioniert also. kannst du sehen. Als Nächstes werden wir also im Grunde an unserer verringerten Menge arbeiten. An dieser Funktionalität müssen wir also arbeiten. Wenn Sie also auf diesen Pfeil nach unten klicken, verringert sich die Menge. Und wenn Sie nur eine Menge haben und wir erneut darauf klicken, den Pfeil nach unten, dann wird sie aus unserem Warenkorb gelöscht. Also müssen wir uns auch um diese Sache kümmern, okay? Jetzt werde ich es schreiben, irritiert den Akzent für die Verringerung der Menge. Also werde ich einfach diesen kopieren. Okay? Es wird fast identisch sein. Wir gehen mit Düsentreibstoff nach oben. Sie wird verringert. Und dieses Mal wollten wir die Menge verringern, wenn die ID übereinstimmt. Und wir wollten auch noch eine Sache machen. Beispiel, wenn Sie nur eine Menge haben und einfach erneut auf diesen Pfeil nach unten klicken, wird diese aus unserem Warenkorb entfernt. Also hier können wir das gefiltert machen, okay? Und wir können hier nachschauen. Wenn ich einen Punkt dazwischen drehe, ist das nicht gleich Null. Das heißt, wenn es Null geworden ist, wird es aus unserem Warenkorb entfernt. Nehmen wir an, entferne diesen. Geben Sie diesen ein, wo immer sie ihn exportieren. Lassen Sie uns diese Aktion in dieser Dot-JS-Datei für den Warenkorbartikel verwenden. Also hier können wir onClick verwenden. Es wird also verringert. Der Code schlägt erneut automatisch vor, ohne dass etwas unternommen wird. Und ich gebe den Ausweis weiter. Und wir müssen im Grunde den Versand innerhalb des Versandes durchsuchen. Okay, also werde ich diesen einfach schneiden. Und ich nehme den dritten Platz und verschicke. Nur dann wird es funktionieren. Gehen wir zum Browser. Aktualisiere diesen. Lassen Sie uns diesen einbeziehen. Lassen Sie uns diesen Abschluss machen. Klicken Sie auf diesen. Es wird aktualisiert. Dies wird auch dazu führen, dass Sie aktualisiert werden. Und wenn Sie erneut klicken, wird dieser Artikel aus unserem Warenkorb entfernt. Das funktioniert also auch. Auf diese Weise. Sie können auch Artikel von der Austauschkarte entfernen. Beide arbeiteten. Sie sagen fertig. Jetzt müssen wir an dieser klaren Karte arbeiten. Wenn Sie einfach auf diese leere Karte klicken, werden alle Artikel entfernt. 35. Projekt 3 Warenkorb – Leere Warenkorb-Aktion: Also werde ich jetzt eine Eingabedatenkarte für Bruchbalken schreiben , okay? Es kann also eine hellklare Karte haben. Okay? Nun, ohne Bundesstaat und Bundesstaat Punkte vor zwei zu haben. Okay. Lassen Sie uns diese Aktion exportieren. Also klare Karte. Und wir haben diesen Knopf in unserem Kartenbehälter. Okay? Wir können also eine OnClick-Methode verwenden und diese Aktions-Clear-Karte anzeigen. Okay. Auch hier schlug mir der sowjetische Code automatisch diese Redoxreaktion vor. Speichern wir diese Datei und gehen wir in den Browser, lesen Sie „Verifizieren Sie diese Datei“. Dieses, klicken Sie auf diese leere Karte. Also jetzt unsere kartesische Party, und wenn der Wagen leer ist, dann will ich nicht, dass er dieses Ding macht, okay, also wollte ich schwimmen. Ich sage wie dein Einkaufswagen in der Eingabe. Hier können wir also überprüfen, ob Punktlänge des Artikels gleich Null ist, das heißt, wir haben einen Artikel ohne Null im Warenkorb. In diesem Fall wollte ich wie in deiner Top-Codierung zurückgeben Eingabe t wie in deiner Top-Codierung zurückgeben. Ich werde das h3-Tag mit dem Klassennamen verwenden. Und ich werde mehr Klasse und trotzdem etwas Spielraum haben . Die ersten Vier, okay? Und wir können dir geben, als würdest du helfen. Und ich werde dein Symbol benutzen. Ich werde normalerweise Spantag sein. Und ich werde ein MDB-Symbol haben. Und drittens kann ich, ich werde ein Symbol verwenden. Und ich kann wie Shoppen in Heisenberg sein. Und nach diesem Span-Tag wähle ich Eingabe D aus. Sie können sehen, dass wir diese Methode sehen können. Und ich habe mich gefragt, hier einen Button hinzuzufügen , um alle Artikel von der Karte zu bekommen. Wenn Sie also mehr mit dieser Anwendung spielen möchten, können Sie auch von vorne beginnen, indem Sie die gesamte Karte von Irish Toe aus anpassen. Also können wir hier nach diesem h3-Tag einen Button haben. Also MDB, btn. Und es wird gute Sachen für die Beine haben. Und Klassenname. Ich gebe dir auch einen MX-Bindestrich. Okay. Und mal sehen wie unser Button aussieht. Es ist in Ordnung, okay. Jetzt müssen wir einen Abschnitt mit grundlegenden Lektüren schreiben, um den gesamten Einkaufswagen aus unserem Shop zu bekommen . Also hier werde ich eine Redoxreaktion schreiben um im Grunde alle Artikel zu bekommen. Okay? Wir können versuchen, es zu erkennen. Und zum Glück können wir es so machen, als ob ein Punkt Punkt gleich Daten ist. Okay? Und wir können diese Aktion exportieren. Besorgen Sie sich Artikel aus der Karte. Wir können die Erkennung in dieser Kartencontainer-Punkt-JS-Datei verwenden . Und hier können wir die On-Click-Methode verwenden. Das können wir zerstreuen. Verschicken, Wachposten besorgen. Speichern wir diese Datei. Und lass uns in den Browser gehen. Klicken wir nun auf diese leere Karte. Egal, meine drei wie du kommen vorbei, um Kumpel zu werden. Und wenn wir auf dieses Rasterelement klicken, erhalten Sie alle Ihre Elemente zurück, die wir in unserer Datenpunkt-JS-Datei haben. Auf diese Weise können Sie diese Anwendung auch umgehen. Die Funktionalität ist abgeschlossen. Sie können sehen, dass alles wie erwartet funktioniert. 36. Projekt 3 Warenkorb – Persist Warenkorbwert mit Redux-Persist: Das Letzte bleibt unerwähnt , wenn Sie sich auf diese Verpflichtung beziehen. Also wollte ich den gesamten Wert wie die Summe zusammen mit diesem Wert und diesem Wert beibehalten . Also werden wir hier verwenden, um den gesamten Kartenwert beizubehalten. Wenn Sie diesen Artikel also vorerst gelesen haben, wird er zurückgesetzt. Also wollten wir den Kartenwert beenden. Also werden wir root x verwenden mit dem Reader-Toolkit fortfahren. Also Leute, jetzt werde ich es konfigurieren. In dieser React-Anwendung bleiben Ablehnungen bestehen. Also, was ich hier tun kann, zuerst müssen wir ein Lager mitbringen. Also haben wir dieses Paket zu Beginn bereits installiert . Und wir müssen auch die Anzahl reduzieren, die bestehen bleibt. Behalte einen Reduzierer bei. Und wir brauchen einen Kombinator, Reduzierer aus unserem Redox. Also bringen wir diesen kombinierten heutigen Tag von Madrid x. Jetzt müssen wir hier schreiben: Konfiguration beibehalten, Konflikt fortführen. Wir müssen Ihnen in Version eins eine Schlüsselrolle geben. Und wir haben einen zweiteiligen Speicher. Jetzt müssen wir diesen kombinierten Reduzierer verwenden. Reducer ist gleich Combine Eraser. Und wir können mit dieser Karte reguliert werden. Und du kannst es hier einfügen. Okay? Und dann musst du an unserem Reduzierer festhalten. Persistent Reducer ist also gleich Persistent Reducer. Wir müssen die Konfiguration, diese Konfiguration, bestehen und dann müssen wir den Reduzierer packen. Und hier können wir diesen benutzen. Okay? Jetzt müssen wir auch einige Anpassungen in dieser Datei index.js vornehmen. Also hier was wir tun müssen, also von Redex Persist, müssen Persist einen Laden bringen. Und wir müssen auch persist AND gate importieren. Redux PR-Test. Wir müssen zur Integration übergehen und reagieren. Und es wird hartnäckig sein. Danach entscheiden wir uns dafür, dies zu verwenden, aber das kann sein, wir müssen unsere Komponente mit dem gekauften AND-Gatter umwickeln und dann darauf bestehen. Und hier müssen wir LED zum Laden benutzen . Und wir können hier zwei übergehen. Okay? Und wir können bieten und trotzdem geübt sein. Also speichern wir diese Datei und überprüfen sie im Browser. Aktualisiere diesen. Wir haben also kein Problem. Lassen Sie uns also alle Operationen ausführen. Das funktioniert also. Insgesamt gibt es also Details. Dieser wird auch besser. Lassen Sie mich nun diese Anwendung aktualisieren. Sie können also sehen, dass unser R-Wert nach dem Ersetzen hier beibehalten wird . Der Gesamtwert wird also ebenfalls beibehalten. Die Quantität wird ebenfalls beibehalten und die Gesamtmenge im Auto wird ebenfalls beibehalten. So konnten wir den Kartenwert auch in dieser Anwendung erfolgreich beibehalten . Jetzt hoffe ich, dass Sie die Warenkorbfunktionalität mithilfe des Verita-Toolkits in dieser React-Anwendung verstanden haben die Warenkorbfunktionalität mithilfe . 37. Project 4 Blog-App – Demo: In diesem Abschnitt. Zunächst werden wir einige grundlegende Konzepte des Redux-Toolkits behandeln, indem wir diese einfache Blog-Anwendung erstellen , in der Benutzer einen Blog posten oder Benutzer einen bestimmten Blog liken oder nicht mögen können Mithilfe dieser Anwendung erhalten Sie eine grundlegende Vorstellung davon, wie Sie mit dem Reduct-Toolkit in einer React-Anwendung arbeiten Für dieses Projekt werden wir einen Startercode verwenden, um diese Anwendung mit dem Reduct-Toolkit zu erstellen Ich werde dich im nächsten Video sehen dem ich über den Startercode sprechen werde Außerdem gebe ich Ihnen einen kurzen Überblick über den Startercode , den wir in diesem Abschnitt verwenden werden. Das war's, aus diesem Intro-Teil. Ich werde dich im nächsten Video sehen. 38. Project 4 Blog-App – Code-Übersicht: Leute, es ist Zeit, mit der Arbeit an unserem allerersten Projekt mit dem roten Toolkit zu beginnen . In diesem Beitrag habe ich für dieses Projekt, das wir bauen werden, dieses Projekt, das wir bauen werden, Redo Kit, einen Quellcode zur Verfügung gestellt , der dieser Vorlesung beigefügt ist Sie können den Quellcode dieses Starterprojekts finden , bevor wir weitermachen und etwas Code schreiben Lassen Sie mich Ihnen einen kurzen Überblick über diesen Startercode geben Ich habe dieses Projekt mit dieser reduzierenden Vorlage erstellt. Sie müssen diesen Schritt nicht ausführen. Ich habe den Quellcode, der dieser Vorlesung beigefügt ist, bereits bereitgestellt . Gehen wir zurück zum VS-Code. Sie können sehen, dass ich eine als Datei habe. Ich habe hier auch Bootstrap verwendet, damit wir das Schreiben von CSS-Code vermeiden können Auf der linken Seite haben wir ein Blockformular, über das wir unseren Blog veröffentlichen können Auf der rechten Seite rendere ich die Blogliste, die mit diesem Blogformular eingereicht wird. Im Moment haben wir nur eine Überschrift. Wenn ich zum Browser zurückkehre, können Sie sehen, dass wir auf der linken Seite ein Blockformular haben und rechten Seite haben wir eine Blog-Liste , in der ich alle Blogs rendern werde. Kehren wir noch einmal zum VS-Code zurück. Hier haben wir eine Index-JS-Datei. Wir haben App und Feature in App, wir haben eine Store-Konfiguration. Im Moment haben wir keinen Reduzierer. Das ist leer. Wir haben einen Feature-Ordner, in dem ich einen Blockordner habe, in dem ich Formular und Blog-Liste habe. Okay, das ist ein sehr einfaches Formular, das ich hier geschrieben habe, damit der Benutzer den Blog veröffentlichen kann. Hier habe ich Ihnen gerade den Quellcode dieser Datei zur Verfügung gestellt , damit wir uns mehr darauf konzentrieren können , das Red Toolkit-Konzept zu erlernen Hier haben wir ein sehr einfaches Formular. Wir haben ein Drop-down-Menü für die Auswahl eines Benutzers. Wir haben ein Eingabefeld für den Titel und wir haben einen Text für unseren Blog Jetzt haben wir auch eine Blog-Liste. Okay, im Moment rendere ich die beiden Blöcke aus dieser Komponente selbst. Okay, hier haben wir auch einen Blog-Benutzer. Wir werden auch zeigen, dass dieser Blog von welchem Benutzer erstellt wurde? Okay. Im Moment ist es einfach, okay. Und wir haben hier einen Antwortknopf. Im Grunde kann man den Blog liken oder anders, das ist eine sehr grundlegende Komponente. Gehen wir nun zurück zu dieser Index-GS-Datei. Im Grunde stellen wir den Store für unsere App bereit , damit unsere Komponente auf den Status zugreifen kann , den wir in unserem Store definieren werden. Zuvor habe ich Sie bereits darüber informiert, dass ich in diesem Projekt eine Bootstrap-Version fünf verwenden werde Ich habe mich bereits für das CDN oder die Bootstrap-Version fünf entschieden, damit wir vermeiden können, in diesem Projekt zu schreiben Lassen Sie uns nun über dieses Paket sprechen, auch JSON-Datei Hier haben wir dieses Reduct-Toolkit und React Reduct, was wichtig ist, um mit dem Reduct-Toolkit in einer React-Anwendung zu arbeiten in einer React-Anwendung Ich habe diese beiden Abhängigkeiten bereits. Immer wenn Sie mit diesem Befehl ein React-Projekt einrichten, wenn Sie mit diesem Befehl ein beliebiges React-Projekt erstellen , werden Sie diese beiden Abhängigkeiten zusammen mit dieser erhalten. Das ist React Reduct und Reduct Tool. Hier dreht sich alles um den Überblick über dieses Blockstarter-Projekt 39. Project 4 Blog-App – Blog Slice: Lassen Sie uns nun mit der Arbeit an dieser einfachen Blog-Pflicht beginnen. Zuerst werde ich hier ein Stück erstellen , das wie Blogs aussehen wird. Liz, ich werde Slice von Red Slide importieren Red Slide Wird im Grunde verwendet, um unseren Ausgangszustand und unsere Aktion und unseren Reduzierer zu definieren unseren Ausgangszustand und unsere Aktion und unseren Reduzierer Zu diesem Zweck erstellen wir ein Slice, Create Slice. Danach müssen wir, was wir hier tun müssen, einen Block Slice definieren. Wir können dieses Create-Slice verwenden , das kein Objekt sein kann, und wir müssen einen Slice-Namen definieren. Ich gebe hier einen Slice-Namen, Block, wir werden den Anfangszustand haben. Okay? Lassen Sie mich hier also einen Anfangszustand definieren, nur aus dieser Blocklisten-JS-Datei. Ich werde diesen einfach herausschneiden, okay? Und ich werde es einfach hier drüben einfügen. Lassen Sie mich in den ursprünglichen Zustand umbenennen. Okay, wir haben unseren Ausgangszustand, jetzt werden wir einen Reducer haben, in wir im Moment eine Aktion schreiben werden, lass es Pet sein Lassen Sie mich diesen einen Fehlerblock-Lider exportieren. Wir exportieren diesen Reducer. Wir werden diesen Reducer in unsere Shop-Js-Datei einbinden. Okay, lassen Sie mich hier zu diesem App-Ordner zurückkehren. Ich werde den Blockreduzierer mitbringen . Blockreduzierer hier. Wir müssen zu diesem Feature-Ordner und zu diesen Blöcken gehen und wir müssen diese Datei verwenden Jetzt können wir unseren Reducer an dieses Reducer-Objekt anschließen. Also Blöcke, wir können jeden Schlüssel geben, was auch immer du willst. Also gebe ich Blöcke weiter, wir können einfach Blöcke zuweisen. Reduzierer. Speichern wir diese Datei hier. Alles ist in Ordnung, denke ich, okay. 40. Project 4 Blog-App – Blog mit useSelector: Gehen wir nun hier zu dieser Blog-Listendatei. Zuerst werde ich einen Selektor aus dem React Reader mitbringen. Weil wir den Zustand auswählen müssen, den wir in diesem Blog Lies definiert haben Zu diesem Zweck brauchen wir, lassen Sie uns den Selektor hierher bringen Dann können wir unsere Blog-Blogs zur Auswahl stellen. Hier können wir von diesem Statusblock aus auf unseren All-Block zugreifen , da unser Reducer hier mit den Schlüsselblöcken registriert ist Okay, jetzt haben wir alle Blöcke. Okay, wir verwenden diese Renderblock-Funktion , um den gesamten Blog zu rendern. Wir haben ID-Titelinhalte. Okay, Blog-Nutzer. Im Moment haben wir also keinen grundlegenden Benutzer. Okay. In diesem Leben kann man sehen , dass es den unbekannten Benutzer einfach wieder in Ordnung bringt. Wir werden die Logik für den Benutzerbrief in diesem Projekt schreiben. Konzentrieren wir uns zunächst auf das Mieten des Blogs. In unserer Anwendung haben wir diesen Blog aus unserem Shop und rendern den Blog mit dieser Funktion. Gehen wir zu dieser Apps-Datei und entfernen diese mit Grafiken versehene Überschrift Ich werde dann die Komponente mit der Blog-Liste hinzufügen. Okay, also lass mich diese Datei speichern, lass uns jetzt in den Browser gehen. Hier können Sie sehen, dass wir unsere zwei Blöcke haben, die wir in dieser Blockfiles-JS-Datei definiert haben. Okay, wir haben diese beiden Anfangsblöcke. Dieser Teil ist abgeschlossen, in dem wir gelernt haben, wie man den Bundesstaat aus dem Laden auswählt . Dieser Teil ist jetzt vorbei. 41. Project 4 Blog App – Blog-Selektor erstellen: Bevor wir nun weitermachen und diese Komponente verwenden, müssen wir über diesen riesigen Selektor sprechen Denn im Moment hat es den Status erhalten und dann haben wir den Status Block Aber wenn sich die Struktur unseres Zustands so ändert wie jetzt, sollte diese Komponente etwas über den Status wissen , wir müssen wissen, dass wir den Status blockieren, es könnte ein State-Blog sein, etwas anderes in der Zukunft. Es wäre besser, wenn wir einen Selektor im Slice erstellen und ihn dann exportieren Auf diese Weise müssen wir, falls sich die Form des Zustands in Zukunft jemals ändern sollte, nicht jede Komponente einzeln durchgehen und ändern Wir könnten das einmal auf der Folie ändern. Lass uns das hier in unseren Block Slices machen. Wir werden eine ausgewählte Datei erstellen, ich werde diese eine Datei exportieren. Exportieren, alle Blöcke auswählen. Wir werden eine anonyme Funktion haben , die in den Zustand A wechselt. Das werden Staatsblöcke sein, okay? Jetzt können wir diesen Selektor in diese Blocklisten-JS-Datei aufnehmen Lass mich den von Block Lies mitbringen. Wir müssen hier alle Blöcke auswählen. Wir können einfach bestehen, alle Blöcke auswählen. Okay? Lass uns diese Datei speichern. Gehen wir zum Browser. Das funktioniert immer noch mit diesem Ansatz. Der Auswahlteil ist in dieser Anwendung ebenfalls abgeschlossen. 42. Project 4 Blog App – Erstelle Aktionen zum Hinzufügen eines Blogs: Lassen Sie uns nun weitermachen und eine Reducer-Funktion erstellen oder den Blog zu unserer Anwendung hinzufügen Ich werde hier in diesem Reducer-Objekt eine Aktion hinzufügen. Wir werden einen Blog haben. Okay, es wird eine staatliche Maßnahme geben, wir können so etwas tun. State, Push und Action machen hier Payload, Action macht Payload Im Grunde die Informationen über unseren Blog, die im Wesentlichen Titel, Text und Benutzer-ID enthalten , Text und Benutzer-ID Dies ist unsere Aktion, die wir in unser Reducer-Objekt eingebracht haben in unser Reducer-Objekt eingebracht Jetzt werden wir gleich über diesen Zustandspush sprechen , denn wenn Sie mit der Reaktion vertraut genug sind, mutieren wir normalerweise keinen Und dieser Punktdruck würde in einem Array reichen. Wir werden gleich darüber sprechen. Lassen Sie mich zuerst diese Funktion exportieren. Wir werden einen Blog mit Lügen führen . Action hier erzeugt Lügen. Generieren Sie im Grunde einen Akzent der mit demselben Namen erstellt wurde , den wir hier definiert haben. Das ist im Blog. Der Accent Creator wird automatisch generiert. 43. Project 4 Blog-App: Verstehe immer js-Rolle: Lassen Sie uns nun über diesen State Push sprechen , den wir hier geschrieben haben. Wir pflegten generell, einen Staat zu schreiben wie den Staat zu verbreiten. Dann haben wir statt State-Push eine Aktions-Payload als neues Element, aber unter der Haube taucht die Verwendung von Read-Toolkits auf, mit denen Sie Ihr Java-Skript wie folgt schreiben Wo Sie normalerweise den Staat mutieren würden. Aber es mutiert nicht. Der Staat entsteht, schafft einen neuen Staat darunter. Jetzt wissen wir, dass dies nur innerhalb von Create Slice funktioniert, wo Sie sonst in Ihrer Anwendung immer noch die richtige Methode verwenden müssen , um den Status nicht zu mutieren Drinnen entsteht jedoch Lüge. Sie können State Push verwenden und Sie können den Staat auf andere Weise direkt steuern, auch Emerges wird damit umgehen Das macht es einfacher, hier drinnen zu handhaben. 44. Project 4 Blog App: Verteile deine Aktion zum Hinzufügen eines Blogs: Lassen Sie uns also weitermachen und diese Aktion in unserer Formularkomponente verwenden . Gehen wir dazu in der Block Forms-Datei über. Wir werden diese Aktion verwenden , die wir gerade erstellt haben. In unserem Blog-Bereich haben wir hier bereits ein Grundformular. Das können Sie sich vorerst ansehen. Ich werde dieses Dropdown nur loben. Konzentrieren wir uns einfach darauf, den Blog mit Titel und Hauptteil zu veröffentlichen den Blog mit Titel und Wir haben E auf Summit , in dem wir gerade die Standardeinstellung verhindert haben, wir haben diese Änderung vorgenommen, um im Grunde den Status jedes Feldes zu verfolgen. Das heißt, wir haben hier einen Eingabe- und Textbereich. Und wir werden eine Logik schreiben, um den Blog nur auf dem Gipfel einzureichen. Also müssen wir zuerst eine riesige Depesche mitbringen. Okay, wir müssen also eine riesige Ladung von Rot aus bringen. Um eine Aktion, einen riesigen Versand, zu versenden, müssen wir die Referenz eines riesigen Versands in einer Dispatch-Variablen speichern . Wir müssen die Referenz für diesen riesigen Versand in dieser Versandvariablen speichern , damit wir eine Aktion versenden können. Nun, hier, was wir hier zuerst tun müssen Ich werde nur überprüfen, ob wir den Titel haben , dann werden wir im Grunde den Versand versenden. Wir müssen auch Klage erheben. Lassen Sie uns auch die Klage erheben. Aus unserem Blog stammt ein Blog, den ich hierher gebracht habe. Wir können hier wie in einem Blog versenden. Hier müssen wir zuerst die ID angeben. Ich werde eine Nano-ID von Red Toolkit-Leuten verwenden . Dafür benötigen wir im Grunde eine eindeutige ID Um ein Nano-ID-Duct-Toolkit mitzubringen , sollte jeder Block eine eindeutige ID enthalten Hier können wir eine Nano-ID verwenden , und zwar in Klammern Jetzt können wir den Titel ausstehen. Danach wollten wir im Grunde jedes Eingabefeld löschen, Titel und das Textformat. Lass es uns leer machen. Dieser Titel, das Eingabefeld und das Äußere des Körpers. nach dem Absenden des Blogs überprüfen, Lassen Sie uns nach dem Absenden des Blogs überprüfen, ob er funktioniert oder nicht. Lass uns in den Browser gehen. Und hier habe ich vergessen, die Komponente in unsere App-Dot-JS-Datei mitzunehmen . Lassen Sie mich das Formular zum Hinzufügen von Komponenten zum Hinzufügen von Blöcken mitbringen. Gehen wir jetzt in den Browser. Es gibt ein Problem mit dem Styling. Lass mich sehen, was los ist. Wir müssen unserer Indexpunkt-CSS-Datei ein Styling hinzufügen. Ich werde einfach das Styling einfügen. Dieses grundlegende Styling müssen wir in unsere Indexdatei einfügen. Keine Sorge, dieses Styling ist immer in deinem Stern präsent. Über diesen Teil müssen Sie sich keine Sorgen machen. Speichern wir diesen und gehen wir in den Browser. Gut, okay, lass mich Bewerbung umformulieren. Sieht gut aus Jetzt müssen wir unseren ersten Blog veröffentlichen, indem wir diese Aktion, die wir hier definiert haben, versenden diese Aktion, die wir hier definiert haben Okay, auf unserem Gipfel. Mal sehen, ob es funktioniert oder nicht. Lass mich einfach testen. Okay, lass mich wissen, was los ist? Lass uns auf Abschicken klicken. Wir haben noch welche übrig, okay, lass mich sehen, was hier vor sich geht. Es wird Body Content sein. Stellen Sie sicher, dass Sie diesen Wert von Inhalt auf Hauptteil ändern. Gehen wir nun in den Browser und reflektieren diese Anwendung. Wir haben immer noch das Problem. Es wird Körper sein, nicht Inhalt. Okay, lass uns das speichern. Lass uns in den Browser gehen. Jetzt haben wir unsere beiden Beiträge, okay, lassen Sie uns diesen schließen. Lassen Sie uns unseren Blog mit der Aktion veröffentlichen, die wir gerade in unseren Blogs Lies erstellt haben. Geben wir ihm ein T. Klicken wir auf Senden. Sie können sehen, dass das funktioniert. So ist es uns gelungen , mit unserer Aktion, die wir gerade mit Hilfe des Toolkits erstellt haben, erfolgreich einen einfachen Blog hinzuzufügen unserer Aktion, die wir gerade mit Hilfe des Toolkits erstellt haben Hilfe des Toolkits erstellt 45. Project 4 Blog-App – Callback vorbereiten: Jetzt funktioniert unser Formular perfekt. Aber es könnte besser sein. Lassen Sie uns darüber sprechen, denn im Moment muss es die Details über den Staat kennen. Um es richtig zu senden, muss es noch einmal ein richtig formatiertes Objekt senden Und es wäre besser, wenn wir etwas davon für uns gewinnen könnten. Wir wollen diese Art von Logik nicht in jeder Komponente duplizieren, die in unseren globalen Status gepostet wird. Stattdessen können wir dies im Handumdrehen mit einem vorbereiteten Callback erledigen Handumdrehen mit einem vorbereiteten Callback Und Prepare Callback kann eindeutige ID generieren, die Daten formatieren das Objekt mit Nutzdaten zurückgeben Und das ist im Grunde das , was wir hier tun. Das wird unsere Komponente wirklich vereinfachen und sie wird alles wieder erledigen, zurück im Slice Gehen wir hier zum Slice. Wir müssen unseren Werbeblog modifizieren. Was wir hier tun können, lass mich das hier rausschneiden. Wir werden einen Reduzierer haben. Okay, wir werden wieder dasselbe haben. Das ist Staat und Aktion. Wir können einfach wie der Staat handeln und mit Taten vorantreiben. Nutzlast. Aktion, Nutzlast Hier können wir unseren Prepare-Callback definieren. Jetzt können wir den Titel und den Hauptteil übergeben. Dann können wir ein formatiertes Objekt zurückgeben. Okay? Und es wird mit der Ladung zurückkehren Nochmals Payload, wir werden hier einen Ausweis haben. Auch hier müssen wir die Nano-ID herbringen. Bringen wir Nano ID, rotes Toolkit, mit rein. Dann können wir unseren Titel und Körper haben. Okay, aber hier fehlt uns etwas. Form und etwas, das uns fehlt. Lass mich hier nachschauen. Ich denke, wir müssen die beiden Dinge entfernen. Okay, und als Gegenleistung müssen wir das benutzen. Ich denke, mein Anruf dafür ist in Ordnung. Überprüfe. Okay, das sieht auch gut aus und hier müssen wir noch eins hinzufügen. Okay, lassen Sie mich das jetzt formatieren. Es ist in Ordnung. Sie können sehen, dass wir hier den Titel und den Hauptteil übergeben, die wir von der Komponente erhalten würden , und dann wird die Aktions-Payload zurückgegeben so wie sie formatiert werden muss Wir sind hierher zurückgekehrt und dann haben wir eine Nutzlast, in der wir Nano-ID zusammen mit Titel und Hauptteil definieren Wir haben unseren Slice mit dem Prepare-Callback modifiziert. Jetzt müssen wir uns auch an die Dinge in unserer Blockform anpassen . Von hier aus können wir dieses Objekt entfernen und wir können es einfach übergeben und den Rest des Dings in unserem Slice bearbeiten , mit diesem Prepare-Callback , den wir gerade hier definiert haben. Okay, lassen Sie uns zu diesem Formular zurückkehren. Der Vorteil dabei ist, dass unsere Komponente wiederum nicht einmal die Struktur des Staates kennen muss. Jetzt wird alles innerhalb der Folie erledigt. Wir können einfach die Rohdaten senden, die wir benötigen. Lass uns das in unserem Browser versuchen. Ich gehe wieder zu meinem Browser zurück. Lassen Sie uns über diese Anwendung nachdenken. Lassen Sie uns einen Titeltest machen, Test it Summit. Jetzt können Sie sehen, dass das funktioniert. Mit diesem Reparaturrückruf können wir unseren Blog erfolgreich veröffentlichen. Dieser Teil ist hier abgeschlossen. Wir vereinfachen oder codieren grundsätzlich ein wenig in unserem Slice. Jetzt sind wir damit fertig und können diesen entfernen. Wir brauchen NanoDCEO nicht. benötigen die ID länger für die Erstellung eines Blogs, da alles in unserem Bereich abgewickelt wird Lass uns das loswerden. 46. Project 4 Blog App – Redux-Dev-Tool: Bevor wir weitermachen und zu dem Teil kommen, wo wir aus dem Drop-down-Menü auswählen werden, lassen Sie uns einfach über das Redo sprechen Lassen Sie mich zum Browser zurückkehren und diese Anwendung aktualisieren. Zuerst öffne ich ein Redcap-Tool. Sie können die Duct Tape Tool-Erweiterung in Ihrem Browser installieren in Ihrem Browser Ich öffne auf der rechten Seite. Okay, lassen Sie mich diese Anwendung einfach aktualisieren. Hier können Sie den Status unserer Anwendung sehen, wir haben diese beiden Blöcke in unserem Ausgangszustand. Und Sie können den Status in einem anderen Format wie einem Diagramm sehen . Sie können es in der Tabelle sehen. Sie können im Rohformat auch sehen, dass Sie ein anderes, anderes Format haben , um den Status unserer Anwendung einzusehen. Rot wird hauptsächlich verwendet, um den Status der Anwendung zu verfolgen, und Sie können auch die Aktion verfolgen, die Sie beenden werden. Versuchen wir erneut, einen Block hinzuzufügen. Ich werde dich nur noch einmal testen. Mal sehen, Opto, du kannst sehen, dass wir unsere Werbeblog-Aktion im Red Depot abgeschickt haben unsere Werbeblog-Aktion im Red Depot abgeschickt Sie können den Versand der Aktion auch verfolgen. Wir haben diese Aktion. Okay, jetzt haben wir drei Blogs. In unserer Anwendung wurde dieser Blog hinzugefügt. Sie können sehen, dass dieser neue Blog in unserem Shop hinzugefügt wurde. Sie können den Unterschied auch hier berechnen. Okay, dieser neue Blog wurde in unserem Shop hinzugefügt. Diese Aktion haben wir gerade ausgeführt, indem wir auf die Schaltfläche Senden geklickt haben. Hier dreht sich alles um den grundlegenden Überblick über das Reduct Tap-Tool und darum, wie Sie dieses Reduct-Tool verwenden , wenn Sie Reduct in einer React-Anwendung verwenden Jetzt werde ich diesen minimieren. 47. Teil, Schnitt – Benutzerslice erstellen: Jetzt fange ich an, am Benutzerteil in dieser Anwendung zu arbeiten , sodass der Benutzer den Benutzer beim Einreichen des Blogs aus der Drop-down-Liste auswählen kann . Ich werde einen weiteren Ordner in diesen Funktionen haben. Ich werde einen Ordner wie Benutzer haben, wir werden Lügen, Lügen haben, weil wir werden Lügen, Lügen haben, weil ich wiederum Slice aus dem Reduct-Toolkit erstellen muss. ich wiederum Slice aus dem Reduct-Toolkit erstellen muss Lassen Sie uns vom Reduct Toolkit Slice ausgehen. Dann setze ich einfach den Ausgangszustand. Wir werden einen Standardbenutzer haben, sodass Sie aus dem Benutzer-Drop-down-Menü auswählen können Danach werden wir einen Benutzerbereich haben. Wir werden den Slice-Namen angeben. Es wird so sein, wir können ihren ursprünglichen Zustand bestehen. Der Reducer wird das leere Objekt sein. Jetzt werde ich hier wieder einen Selektor für den Benutzerexport erstellen . Alles auswählen Wir werden eine anonyme Funktion haben. Es wird Staat und Staaten geben. Dann können wir den Standard-Reducer exportieren. Dann können wir diesen Reduzierer in unserem Geschäft anschließen. Gehen wir zu dieser Speicherdatei. Ich kann einfach diese, diese Importanweisung, kopieren. Das wird nutzerfreundlich sein, es wird aus Lügen kommen. Wir müssen den gesamten Teil ändern. Es wird aus dem Benutzerordner und dann aus dem Benutzerbereich kommen. Hier wird es sein, und die Anzahl der Benutzer wird reduziert. Wir sind mit dem Benutzerbereich in dieser Anwendung fertig. 48. Project 4 Blog-App – Listen Sie Benutzer in Dropdown: Gehen wir nun zurück zu diesem Blockformular. Hier müssen wir zuerst alle Benutzer zusammenbringen. Wir müssen auch den Selektor mitbringen. Hier können wir unseren All-User haben, okay, wir können den Selektor, den wir gerade definiert haben, in diesem Lassen Sie uns das auswählen gesamte Benutzer-VS-Code automatisch für mich importiert wird Okay, in deinem Fall wird es nicht importiert, also musst du es manuell importieren. Jetzt haben wir alle Benutzer, okay, wir können diese Codezeile hier einfach auskommentieren Was wir tun müssen, lass uns eine Option haben. Wahl. Wir wollen alle Benutzer, wir können sie kartografieren. Wir werden es tun, eine Option zu haben wird wie ein Benutzer sein. Wir können hier einen Wert eingeben: Benutzer. Dann in diesem Benutzernamen. Lassen Sie uns diese Benutzeroption hier verwenden. In der Drop-down-Liste können wir die Benutzeroption haben. Mal sehen, ob wir den Benutzer in der Drop-down-Liste sehen können oder nicht Gehen wir zurück zum Browser. Hier haben wir unsere drei Benutzer, die wir in unserem Benutzerleben definiert haben, das sind John Doe, Nancy und James Bond. Dieser Teil ist fertig, aber wir müssen noch einige Änderungen vornehmen, bevor wir unseren neuen Blog mit den neuesten Änderungen veröffentlichen. 49. Project 4 Blog App: Aktionen ändern und Callback vorbereiten: Welche Änderungen müssen wir hier vornehmen. Lassen Sie uns verstehen, dass beim Hinzufügen des Blocks wir beim Hinzufügen des Blocks auch den Benutzer übergeben werden. Okay. Hier, was wir tun werden, Sie können sehen, dass für das Dropdown wir hier verwenden, handle, user, handle user im Grunde genommen den Benutzer wiederherstellen wird , okay, es wird die Benutzer-ID wiederherstellen Wie Sie das hier in der Handle-Benutzerfunktion sehen können. Lassen Sie uns hier auch die Benutzer-ID übergeben. Da wir ursprünglich drei Dinge wie den Titeltext und die Benutzer-ID für unser Blogformular definiert haben , übergeben wir diese Benutzer-ID, da wir diesen Aktionsteil beim Versenden dieses Werbeblocks haben, haben wir ein weiteres Argument hinzugefügt, nämlich die Benutzer-ID, also welcher Benutzer den Blog im Grunde veröffentlicht Wir müssen auch die Callback-Funktion ändern oder vorbereiten , die wir im Blog li definiert haben Gehen wir zu dieser Datei Lassen Sie mich zu der Datei zurückkehren, die Blog Slice ist. Jetzt wird es also die Benutzer-ID erhalten. Okay. Also die Benutzer-ID wird empfangen und es wird die Benutzer-ID sein. Okay. Also haben wir unseren Prepare-Rückruf geändert. 50. Project 4 Blog-App: Zeig Blog mit Nutzern: Jetzt müssen wir auch einige Änderungen an unserer Blog-Benutzerkomponente vornehmen. Okay, im Moment wird nur der unbekannte Benutzer angezeigt. Wir zeigen den Benutzernamen nicht an. Okay, bevor wir das tun, gehen wir zurück zu dieser Bloglistendatei. Hier. Sie können sehen, dass wir die Benutzer-ID weitergeben. Wir ordnen jeden Block , den wir von unserem Shop erhalten. Und wir übergeben die Benutzer-ID hier, okay, an diese Blog-Benutzerkomponente. Wir können diese Benutzer-ID hier erwähnen. Okay, danach müssen wir, was wir tun müssen, den ersten Selektor aus dem React-Reader holen Da wir herausfinden müssen , welcher Benutzer den Blog im Grunde veröffentlicht, müssen wir zuerst alle Benutzer auswählen, die wir in unserem Benutzerbereich haben auswählen, die wir in unserem Benutzerbereich Dann benötigen wir zunächst die Auswahl aller Benutzer. Und wir können hier den Selektor übergeben , den wir im Benutzerbereich definiert haben. Wählen Sie den Port für alle Benutzer automatisch für Danach können wir hier eine grundlegende Logik schreiben. Wir müssen diesen bestimmten Benutzer finden, den wir hier verwenden können. Alle Benutzer werden feststellen, dass wir jeden Benutzer haben werden, wir erhalten bereits die Benutzer-ID von unserer Blocklistenkomponente. Es wird wie eine Punkt-ID sein. Und wenn die ID übereinstimmt, werden wir uns diesen Benutzer schnappen und den Namen anzeigen. Was wir hier tun müssen, lassen Sie uns zuerst diesen entfernen. Wenn wir den Benutzer haben, dann den Benutzernamen L, wird es ein unbekannter Benutzer sein. Okay, lass uns diese Datei speichern. Gehen wir auch zu dieser JS-Datei des Werbeblock-Formulars. Hier. Ich werde auch das Dropdown-Feld, Benutzer-ID, leeren und es wird nach dem Absenden des Blogs leer sein Bevor wir einen Blog mit all diesen Änderungen veröffentlichen, wollte ich die Schaltfläche „ Senden“ deaktivieren bis alle Felder vom Benutzer ausgefüllt Was ich tun kann, ich kann eines ausfüllen. Es wird geprüft, ob jedes Eingabefeld einen Wert hat oder nicht. Wir können Ihren Goldbarrentitel Bullion verwenden, es wird Body Bullion sein, es wird Ihre Benutzer-ID sein Diese Schaltfläche wird deaktiviert. Wenn ein Eingabefeld leer geblieben ist, können wir dieses einfach überprüfen. Okay? Mal sehen, ob es funktioniert oder nicht. Wir müssen zurück zum Browser gehen. Formulieren Sie diesen Ich werde hier einen Benutzer auswählen, John Doe. Lass uns einen Titeltest machen. Lass uns einen Körpertest machen. Jetzt können Sie sehen, dass diese Schaltfläche nach dem Absenden des Werts in jedem Eingabefeld aktiviert wurde . Lass uns auf Summit klicken. Jetzt können Sie sehen, dass wir dieses Mal auch den Benutzernamen bekommen haben. Das ist John Doe. Okay, dieser Teil ist auch hier abgeschlossen und Sie können sehen, dass wir erfolgreich auch einen Blog mit dem Benutzernamen veröffentlichen konnten . Wir sind hier fertig mit der Auswahl des Benutzers und der Veröffentlichung des Blogs mit dem spezifischen Benutzernamen. 51. Project 4 Blog App – Redux-Aktion für Like/Unlike: Lassen Sie uns weitermachen und an den restlichen Funktionen arbeiten , die wir in der Anwendung haben Wir müssen auch die Funktionen „Gefällt mir“ und „ Gefällt mir nicht“ implementieren Funktionen „Gefällt mir“ und „ Gefällt mir nicht Immer wenn ein Benutzer auf die Schaltfläche „ Gefällt mir“ oder „Gefällt mir nicht“ klickt, wird sie zunehmen Lassen Sie uns auch an dieser Funktion arbeiten. Mit dem Reduct-Toolkit müssen wir dafür eine Reducer-Funktion schreiben Und bevor wir eine Reducer-Funktion schreiben, modifizieren wir den Reparatur-Callback Sie können sehen, dass wir im Anfangszustand ein Antwortobjekt haben und wir im Gegensatz dazu dass wir im Gegensatz dazu dasselbe auch im Reparatur-Callback haben werden Lassen Sie uns zunächst eine Antwort geben, okay? Und es wird so sein wie am Anfang, es wird Null sein, alles wird Null sein. Wenn nun ein Benutzer einen Blog erstellt hat, speichern wir diesen. Jetzt fangen wir an, eine Reducer-Funktion zu schreiben , um das p zu liken oder nicht zu mögen. Ich werde hier eine Reducer-Funktion als Antwort hinzufügen , die dafür verantwortlich ist, eine Statusaktion aus der Aktions-Payload zu pingen oder nicht zu mögen Wir werden zwei Dinge erhalten. Immer wenn ein Benutzer eine Aktion ausführt, während er „Gefällt mir“ oder „Gefällt mir nicht“ markiert, erhält das P eine Blog-ID und Sie können sehen, dass diese Komponente hier einen Namen und Emoji hat , die ich hier verwendet habe, wie Objekteingabe. Da es sich um ein Objekt handelt und wir es zuordnen, ist dieser Name der Schlüssel und mog ein Wert Wir werden zwei Dinge weitergeben, nämlich Block, der uns grundsätzlich gefällt , und das Bild Wir werden später an dieser Komponente arbeiten. Lassen Sie uns zunächst an dieser Fraktions-Payload mit der Reducer-Funktion arbeiten dieser Fraktions-Payload mit der Reducer-Funktion Wir werden zwei Dinge erhalten, die Blog-ID und Wir müssen den bestehenden Blog im Bundesstaat überprüfen. Wir haben unseren gesamten Blog-Status gefunden, wir werden zuerst einen Blog haben. Wir müssen grundsätzlich dem Blog zuordnen, welcher Blog uns grundsätzlich gefällt, welcher nicht Zuerst müssen wir uns einen bestimmten Blog aussuchen und hier können wir diese Blog-ID angeben Wenn Sie den vorhandenen Blog haben, dann die bestehende Blog-Antwort. Hier, die Antwort hier, im Grunde werden wir sie erhöhen, okay? 52. Project 4 Blog-App: Zeige mit Redux die Anzahl „Gefällt mir/Ungefällt“: Was wir als Nächstes tun müssen. Was wir zuerst bringen müssen, ist ein riesiger Versand von React, ein riesiger Versand Hier müssen wir zuerst die Referenz von Dispatch in eine Dispatch-Variable umwandeln Diese Komponente wird auch einen Blog erhalten. Okay, aus unserer Blog-Liste. Okay. Sie können sehen , dass wir im Moment nichts weitergeben. Lass uns ihren Blog weitergeben und wir können einfach einen bestimmten Block blockieren. Okay, jetzt empfängt diese Komponente der Antworttaste den jeweiligen Blog. Hier, was wir mit einem Klick tun können, wir können im Grunde einen Aktionsversand versenden. Wir können die Aktion einleiten. Wir haben die Aktion erstellt, aber ich schätze, wir haben sie nicht exportiert. Lassen Sie uns diese exportieren. Okay. Gehen wir jetzt zurück zu dieser Antworttaste hier. Zuerst müssen wir den mitbringen. Wir müssen diese Funktion zur Reduzierung der Funktionen in einen Blog-Slice-Bereich bringen Reduzierung der Funktionen in einen Blog-Slice-Bereich Wir müssen zusätzliche Antworten liefern. Dann können wir diese Antwort hinzugefügt versenden. Wir müssen zwei Dinge bestehen. Das heißt, die erste Blog-ID, wir bereits von dieser Blog-Blog-Punkt-ID erhalten. Das wird es sein, wir müssen nämlich auch die Anzahl anzeigen. Machen wir das. Eine Blog-Antwort und wir können hier den Namen weitergeben. Lass uns in den Browser gehen und sehen, ob es funktioniert oder nicht. Verweisen Sie zunächst auf diesen. Jetzt können Sie sehen, dass wir anfangs die Zählung Null hatten. Okay. Wenn du auf diesen klickst, wird er nicht inkrementiert Lass mich sehen, was los ist. Wir können eine Aktion auslösen oder nicht. Sehen wir uns zunächst an, dass eine Aktion überhaupt nicht ausgelöst wird Eigentlich haben wir diese Reducer-Funktion außerhalb dieses Reducer-Objekts geschrieben diese Reducer-Funktion außerhalb dieses Reducer-Objekts , okay? Es wird hier geschlossen Eigentlich müssen wir hier schreiben. Okay, dieser. Und füge es hier ein. Aktualisiere diesen zuerst. Das funktioniert, okay? Wie Sie sehen können, wird das schrittweise erhöht. Lassen Sie uns hier einen Blog mit Nancy hinzufügen. Lass uns dir einen Test geben. Lass uns das einfach kopieren. Lass uns einreichen, mal sehen ob wir diesen neu erstellten Blog mögen können oder nicht. Das ist auch Arbeit. Sie können sehen , dass unsere Funktionalität auch in dieser Anwendung funktioniert. Mit Hilfe des Lesers habe ich es gemacht. Es scheint, als ob in dieser Imple-Blog-Anwendung alles funktioniert 53. Zusammenfassung: Wenn Sie sich dieses Video ansehen, bedeutet das, dass Sie diesen Kurs erfolgreich abgeschlossen haben und ich hoffe, dass Sie umfassendes Verständnis dafür haben , wie mit React-Toolkit in der React-Anwendung arbeiten können. Danach können Sie das redact-Toolkit auch in jede vorhandene Reaktion integrieren , die abgelehnt wurde. Und Sie können auch das React-Projekt konvertieren , in dem der alte Redux-Code die Projekte verwendet, die Sie einfach in Reduction Toolkit konvertieren können . Das war's von meinem Ende. Wenn Sie eine Abfrage oder einen Punkt haben, können Sie Ihre Abfrage in den Kommentarbereich stellen. Ich werde mein Bestes geben , um Ihre Anfrage zu lösen. Sie können auch meinen YouTube-Kanal besuchen , um mehr Inhalte Reactant oder Produkt zu erhalten, mit denen Sie am Donnerstag mehr Wissen über React und Editor können . YouTube-Kanal für mehr Riss von einem Reaktanten. Und wenn du dir meine Playlist ansiehst, habe ich eine andere, andere Pose Schulden bei einem React. Ich habe ein Anfängerprojekt, Reduct-Projekt. Ich habe sie auch Klonanwendung erstellt, und ich habe auch eine Full-Stack-Anwendung. Leute, ihr könnt meinen offiziellen YouTube-Kanal immer für mehr als einen reaktanten Redux besuchen meinen offiziellen YouTube-Kanal . Das war's von meinem Ende. Vielen Dank Jungs , dass Sie diesen Kurs besucht haben. Wir sehen uns in anderen Kursen.