ReactJS und Redux - 4 Web-Apps erstellen [3/4] | David Katz | Skillshare

Playback-Geschwindigkeit


  • 0.5x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 2x

ReactJS und Redux - 4 Web-Apps erstellen [3/4]

teacher avatar David Katz, Software Engineer - Coding Instructor

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

14 Einheiten (1 Std. 2 Min.)
    • 1. Einführung des Kurses

      1:33
    • 2. Wireframing ReminderPro

      1:25
    • 3. Redux vorstellen

      5:55
    • 4. Vorstellung von Aktionen und Action

      5:20
    • 5. Bereitstellung eines Shops und Einführung von Reduzierern

      5:45
    • 6. Versenden an Requisiten und verbindliche Action

      6:48
    • 7. Zuordnung von Zustand zu Props

      3:03
    • 8. Liste der Erinnerungen

      5:28
    • 9. Erinnerung löschen

      5:47
    • 10. Verkleinern der Listenkomponente

      4:25
    • 11. Timestamping

      4:14
    • 12. Augenblicke mit MomentJS interpretieren

      4:17
    • 13. Backen Browser Cookies

      3:26
    • 14. Alle Erinnerungen löschen

      4:33
  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Alle Niveaus

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

692

Teilnehmer:innen

1

Projekt

Über diesen Kurs

Werde ein anspruchsvoller Softwareentwickler, indem du dieses Tutorial zu React JS und Redux befolgen. Als eine der am meisten bezahlten Fähigkeiten für Webentwickler öffnet dir das React Türen und Arbeitsplätze für dich.

 

Dieser projektbasierte Kurs wird dich sofort programmieren. Vier durchdachte Beispielanwendungen in diesem Kurs aufbauen werden deine Fähigkeiten in der modernen Webentwicklung verschärfen.

 

Erlernen Sie zunächst die Prinzipien von React JS durch das Erstellen von zwei Anwendungen. Eins stellt ES6/Babel vor und die andere wie man HTTP in Reaktion mit einer API behandelt. Mit der dritten Anwendung lernen Sie, wie du Browser-Cookies manipulierst. Schließlich kannst du eine ganze App mit voller Authentifizierung und einer Echtzeitdatenbank erstellen, um sie zu beenden.

 

Außerdem lernst du das Engineering von Redux kennen. Du wirst feststellen, dass Redux auf drei einfache Schritte abläuft!

Keine Sorge, wenn du neu in der Web-Entwicklung bist. Einige JavaScript werden helfen, aber dieser Kurs stellt sicher, dass jedes neue Konzept genau erklärt wird.


Nimm den Tauchgang in React JS und Redux.
Lass uns mit der Codierung beginnen!

 

Außerdem ist hier ein Link zum Online-Repository für diesen Kurs: https://github.com/15Dkatz/ReactJS_VideoGuides

 

Triff deine:n Kursleiter:in

Teacher Profile Image

David Katz

Software Engineer - Coding Instructor

Kursleiter:in

David is a software engineer at Zendesk, with a Bachelor of Computer Science from the University of San Francisco.

David has gained valuable experience from the tech industry. By incorporating these best practices, he hopes to create the highest quality learning experiences possible.

Feel free to connect with David! He is always curious about the cool project you're working on. And he loves to discuss ideas on how to build impactful technology.

Vollständiges Profil ansehen

Kursbewertungen

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%
Bewertungsarchiv

Im Oktober 2018 haben wir unser Bewertungssystem aktualisiert, um das Verfahren unserer Feedback-Erhebung zu verbessern. Nachfolgend die Bewertungen, die vor diesem Update verfasst wurden.

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen bei Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Einführung des Kurses: willkommen zu einer ausgezeichneten Ressource, wie man Reaktion zu lernen. Ja und Redox. Herzlichen Glückwunsch. Learning React bringt Sie einen Schritt voraus, denn es ist eines der am meisten nachgefragten und bezahlten Fähigkeiten in der Softwareindustrie. Ich habe diesen Kurs mit einem übergeordneten Ziel entworfen, damit Sie in einem Redux auf Ihren Lebenslauf reagiert haben und sich darauf vorbereitet haben, Ihre eigenen Reaktionsprojekte von Grund auf neu zu erstellen. In diesem Kurs erstellen Sie vier Anwendungen. Man wird Sie mit den Prinzipien reagieren und JavaScript es sechs Syntax einführen . Die nächste wird mit einem P I und zeigen, dass Sie einen Deal mit Web-Anfragen hatten In reagieren. Drittens lernen Sie Redux. Es erstellt eine Anwendung, die auch Informationen lokal im Browser speichert. Und schließlich, das Beste von allem, werden wir eine Redox-App haben, die volle Ausbildung für die Anmeldung von Benutzern hat. Als eine Datenbank zurück kam, werde ich jedes neue Konzept genau überprüfen und messen jede neue Idee. Auf diese Weise haben Sie ein gründliches Verständnis des Mantels und der Technik. Außerdem lasse ich dich jetzt auf ein Geheimnis ein. Redux kann sich zunächst kompliziert anfühlen, aber Sie können es auf drei grundlegende Schritte aufkochen. Alles klar, wenn Sie endlich den Schlüssel zum Reagieren und Redux freischalten und sie zu Ihrem Skill Set hinzufügen möchten oder Sie einfach nur Ihre Web-Entwicklungskoteletts aufräumen möchten, dann ist dieser Kurs perfekt für Sie. Also, worauf wartest du? Lassen Sie uns anfangen zu codieren. 2. Wireframing ReminderPro: Hallo. Dies ist Reminder Pro, eine süße kleine Anwendung, die Sie wissen lässt, was Sie tun müssen. Und wenn Sie es tun müssen, funktioniert es. Ziemlich einfach. Fügen Sie Ihre Erinnerung in das Eingabefeld und auch das Fälligkeitsdatum ein. So wissen Sie, wann Sie es tun müssen. Also lassen Sie uns eine Aufgabe hinzufügen. Wie wäre es, eine Gallone Milch zu kaufen? Ich sage, es wird am 31. Januar um 12 Uhr erledigt werden und sie sind hinzugefügt zu unserer Liste der Erinnerungen. Kümmere dich jetzt. Wir könnten nur Zahlenfälligkeitstermine haben. Aber die Anwendung entscheidet auch, diese Daten lesbarer und freundlicher für die menschliche Interpretation zu machen . Eine weitere tolle Sache an dieser Anwendung ist, dass wir die Web-App nicht offen halten müssen, damit sie sich an alles erinnern kann. Es verwendet Browser-Cookies. Wenn ich also aktualisiere, um einen Verlauf von Erinnerungen zu speichern, so dass Sie immer wieder die gleichen Erinnerungen auf der Seite sehen, wenn Sie sie erneut besuchen . Außerdem können wir Erinnerungen löschen, sobald Sie sie abgeschlossen haben. Nehmen wir an, ich habe meine englischen Hausaufgaben bereits beendet, dass ich sie gerade gelöscht habe. Außerdem können wir Erinnerungen auf einmal löschen. Sobald du alles großartig abgeschlossen hast, werden wir so viel mehr über React und die Awesome Redux Library erfahren. Wenn ich diese Anwendung erstelle, kann ich es kaum erwarten, loszulegen, also lass es uns tun. 3. Redux vorstellen: bevor wir mit Redux-Code in ein neues Territorium übergehen. Lassen Sie uns etwas Vertrautes machen und unsere Anwendung einrichten, die wir verwenden, erstellen Sie noch einmal, und dieses Mal werden wir es nennen. Reminder Pro. Stellen Sie also sicher, dass Sie sich in dem Verzeichnis befinden, in dem Sie alle Ihre Reaktionsprojekte erstellen. Großartig wie seine Installation. Gehen Sie voran und positieren Video, weil ich überspringen werde, um zu gewinnen. Meine Bewerbung ist abgeschlossen. , Vergessen Sie nicht,in Ihr Projekt zu navigieren. Und dann, während wir im Terminal verdienen, bereiten wir uns vor der Zeit vor und installieren tatsächlich die Reduktions- und Redux-Bibliotheken für die zukünftige Verwendung. Also werden wir einfach NPM toe verwenden, Redux installieren und React Redux und sicher Great Niemand öffnet unseren Code und richtet unsere erste Komponente ein. Ich werde auch rennen und PM starten. Auf diese Weise konnten wir ihre Anwendung sehen, während wir sie so einrichten, dass ich alles eingerichtet habe . Das erste, was ich tun möchte, ist Zement ified CSS-Datei von Bootstrap online zu bezahlen, so können wir bereits beginnen, die CSS-Klassen zu verwenden, um unseren Entwicklungsprozess zu beschleunigen, Design weise sagte navigieren, um mit Bootstrap zu beginnen. Wir finden ihre neueste kompilierte, identifizierte CSS-Datei. Jetzt müssen wir Index dot html in unserem Projekt finden und einfach kopieren und direkt über dem Titel einfügen. Großartig. Kommen Sie nie wieder zu unserer Bewerbung. Das nächste, was wir tun werden, ist, den Quellordner zu löschen und sich einzurichten. Auf diese Weise können wir von einem sauberen Schiefer beginnen. Lassen Sie uns nun eine neue Quellfaltung erstellen. Dann erstellen wir unseren Indexpunkt Js nach dem gleichen Muster wie zuvor. Denken Sie daran, wir müssen importieren reagieren von reagieren gut wichtig sind auch stumm reagieren. Von reagieren. Strich runter. Lassen Sie uns reagieren stumm, nicht machen einfach machen, haben wir Reminder Pro speichern? Ich wollte nicht unser Dokumentelement, aber ich d, das root ist. Nachladen. Und da gehen wir hin. Wir sehen Reminder Pro in der oberen linken Ecke. Das nächste, was wir tun werden, ist unsere erste Komponente zu erstellen, aber bevor wir es tun, lassen Sie uns tatsächlich eine Quellkomponente erstellen. Felsbrocken. Also ein neuer Ordner Komponenten, und dieses Mal haben wir einen Komponenten-Ordner, weil wir mehr Dateien in dieser Anwendung zu arbeiten haben, und mit in dieser Anwendung zu arbeiten haben, einem Komponenten-Ordner wird die Dinge sehr organisiert. Also lassen Sie uns unsere erste Komponente AP J Sex erstellen und dann werden wir reagieren und die Komponente von reagieren sowie reagieren. Und ihr wisst wahrscheinlich mittlerweile, wie die ganze Sache funktioniert. Es gibt ein Problem. noch schneller eingeben als ich, wird standardmäßig exportiert. Diese App werde ich rendern und einige JSX zurückgeben. Wir werden ein allgemeines div haben, dessen Klassenname apt ist. Lassen Sie uns unsere Reminder Pro-Komponente geben. Ein Titelklassenname ist ein Titel, und wir sagen Erinnern Sie Ihren Profi und jetzt wird tatsächlich bereits nutzen reagieren. Bootstrap. Wir erstellen hier ein Formular. Also wird unser Klassenname Form in Zeile sein, weil wir ein Eingabefeld direkt neben einer Schaltfläche ausrichten werden. Wir werden eine Formgruppe haben. Wir werden eine Texteingabe für Nein haben. Also unsere Eingabe der Klassenname wird Formular-Steuerelement sein, und dann wird unser Platzhalter sein. Ich habe zwei Punkte, Punktpunkte, wie geheimnisvoll. Dann fügen wir eine Schaltfläche hinzu, die direkt daneben Zeile wird. Es ist Typ wird Button sein. Es ist Klasse. Name wird einer der Boot-Shop-Klasse sein, eine Herrin Bt und kurz für Knopf und Knöpfe. Erfolg würde es nur grün machen. Es gibt Knopf Gefahr Knopf königlich und schließlich sind Aber Name wird bei Erinnerung sein Was speichern? Und dann, natürlich, wir müssen die App mit einem Index solche s importieren. Also lassen Sie uns AP von Komponenten Slash importieren dann wird diese JSX mit unserer APP platzieren. JSX. Großartig. Das sieht gut aus. Wir brauchen eigentlich nur etwas später etwas Styling. Aber wir können jedoch jedoch auf die eigentliche Funktionalität übergehen und mit Redux beginnen. Wir sehen uns im nächsten Video. 4. Vorstellung von Aktionen und Action: Jetzt möchten wir Funktionalität zu dieser Werbeerinnerungsfunktion Schaltfläche direkt hier hinzufügen, bevor wir dastun , bevor wir das , müssen jedoch unsere Reduktionsanwendung einrichten. , Lassen Sie uns sicherstellen,dass Sie eines der ersten Prinzipien von Redux verstehen. Wir haben ein riesiges Geschäft, das unseren Anwendungsstatus hält. Wieder einmal ist Store ein globales Objekt, das den Anwendungsstatus enthält. Es ermöglicht, den Status durch ausgelöste Aktionen zu aktualisieren, und es ändert den Status basierend darauf. Hören Sie sich die Aktionen an, die wir in unserer Anwendung jetzt intuitiv gesendet haben, klingt das Hinzufügen einer Erinnerung nicht wie eine Möglichkeit, die einen Zustand ändert, der den gesamten Store ändert ? Daher benötigen wir eine Möglichkeit, eine Werbeerinnerungsaktion durchzuführen, damit wir diesen Shop aktualisieren können. Aber bevor wir eine solche Aktion erstellen, lassen Sie uns überprüfen, was eine Reduktionsaktion tatsächlich ist. Aktionen sind nur einfache JavaScript-Objekte wie diese. Sie müssen eine type-Eigenschaft haben, so dass in der Regel Typ wäre hinzufügen Erinnerung für Anzeige Erinnerung. Und diese Typeigenschaft sagt einfach, lesen Sie uns, welche Art von Aktion ausgeführt wird, und sie können manchmal einen Payload-Schlüssel haben, der alle Daten oder ein anderes T enthält, das alle notwendigen Informationen innerhalb des JavaScript-Objekt, das wir verwenden, um diese Aktion zu verwenden, um den Speicher zu aktualisieren. Das Hinzufügen unserer Erinnerung bedeutet also, eine Aktion wie diese zu haben. Aber wir können nicht einfach dieses Job-Skript-Objekt erstellen und erwarten, dass etwas passiert. Nein, wir brauchen, was Leser einen Aktionsersteller nennt, der eher einer Funktion ähnelt, die die Java-Skript-Aktion selbst zurückgibt. Also gab es dieses ganze Job-Skriptobjekt zurück. Jetzt kann es verwirrend werden. Was ist der Unterschied zwischen einem action und inaction creator? Ich weiß, dass es viele Dinge zu wissen gibt, aber um es einfach zu reduzieren, ist die Aktion ein JavaScript-Objekt selbst, während der Aktionsersteller die Funktion ist, die diese Aktion zurückgibt oder das JavaScript-Objekt zurückgibt . Lassen Sie uns endlich damit beginnen, diese tatsächliche Werbeerinnerungsaktion zu machen. Zuerst brauchen wir eine Art der Aktion und hosten unsere Typen. Wir haben normalerweise eine Konstanten-Punkt-Js-Datei in unserer Quelle, wenn nicht der gesamte Konstanten-Ordner. Aber im Moment haben wir nur einen konstanten Punkt. Der Tag macht Spaß. Unser erstes Konzert. Es wird einfach Erinnerung hinzufügen und diese Zeichenfolge folgen Es kann wirklich alles sein, was Sie mögen , weil wir uns wirklich auf diese Variable konzentrieren, um in ihrer Anwendung zu hosten. Dies könnte also eine zufällige Zeichenfolge sein, eine Zufallszahl, aber normalerweise lähmen Sie es einfach und machen Sie Werbeerinnerung als auch. Lassen Sie uns nun Aktionsordner zur Quelle hinzufügen. Wir haben eine Indexpunkt-JS-Datei innerhalb des Aktionsordners. Als Erstes wird diese Anzeigenerinnerung importiert. Konstante. Stellen Sie sicher, dass ich es richtig buchstabiere. Los geht's. Gehen wir zurück. Ein Verzeichnis nach Konstanz und dann endlich, lassen Sie uns diese Aktion erstellen. Wir rufen die Funktion auf, fügen Erinnerung hinzu und deklariert als Konstante. Es wird eine anonyme Ära Funktion sein. Es wird einen geben, den Text, den wir übergeben werden. Für jetzt, lassen Sie uns eine Aktion definieren in hier. Denken Sie daran, wir haben diesen Typ und es wird Erinnerung hinzufügen, die hier wieder importiert. Unsere Daten werden einfach sein Der Text in diesem Text, den wir verwenden können, ist sechs kurze Hände in Steuer, wenn der Schlüssel und der Wert genau gleich sind. Nun, bevor wir diese Aktion zurückgeben, werden wir zu Konsolenpunktprotokoll es. Auf diese Weise können wir verstehen, was so vor sich geht wie wir. Buck sind Befürworter in der Zukunft. Und dann lassen Sie uns die Aktion zurückgeben. Und ich habe gerade eine Sache bemerkt, dass ich keine Indexpunkt-JS-Datei erstellt habe, die ich gerade eine Js-Datei erstellt habe. Ich habe Dajaes Vater nicht indiziert. Also sag Index Punkt Js Wir werden alles von hier verschieben. Sie haben wahrscheinlich nicht den gleichen Fehler gemacht und ich werde das hier löschen. Ja, rette uns. Großartig. Nun, da wir diese Aktion eingerichtet haben, werden wir noch nichts mit diesem Button tun. Es gibt noch ein wenig mehr mit Redox einzurichten. Aber mach dir keine Sorgen, bleib geduldig damit. Lesen Sie uns ist so genial, wenn es endlich zusammenkommt. Und vertrauen Sie mir, wenn ich sage, dass, wenn Sie eine riesige Anwendung Redux erstellen, achten Sie darauf, es sehr einfach für Sie zu halten, trotz aller ursprünglichen Senat am Anfang. Lassen Sie uns also fortfahren, um diese Aktion tatsächlich mit unserer Anwendung zu verbinden 5. Bereitstellung eines Shops und Einführung von Reduzierern: haben wir noch einen weiteren Schritt bei der Einrichtung unserer Redux-Anwendung zu berücksichtigen. Wir müssen darüber nachdenken, den tatsächlichen Laden jetzt zu initialisieren. Obwohl wir Untätigkeit Schöpfer für das Hinzufügen von Erinnerungen kürzlich haben, habe ich keine Ahnung, was der Zustand für die globale Anwendung ist. Was wir tun müssen, ist eine bereitgestellte Komponente von React Redux einzurichten, die ihren Store an unsere gesamte Anwendung weitergibt . Erhalten Sie nie den Index Punkt ja, und wir importieren Anbieter von React Redux. Jetzt ist das Hinzufügen eines Anbieters einfach. Fahren Sie einfach mit diesem App-Tag innerhalb eines Anbieter-Tags. Hier gehen wir, und wenn wir sparen, scheint es, als hätten wir bereits Speicher für uns, aber wie Sie sehen können, bekommen wir hier eine Luft. Es besagt, dass der Prop Store als erforderlich und Provider markiert ist, aber sein Wert ist nicht definiert. Also lassen Sie uns ein Geschäft erstellen, das wir importieren, erstellen Shop aus dem Lesen. Lassen Sie uns eine Konstante von Speicher als erstellt Speicher, die eine Funktion ist, und dann werden wir einen Store-Schlüssel an Anbieter in einem Geschäft übergeben. Lasst uns nachladen. Und jetzt, sagt man, erwartet, dass der Produzent eine Funktion sein wird. Lassen Sie uns also darüber nachdenken, was ein Produzent tatsächlich in Bezug auf Reduktion bedeutet, damit wir einen an diesen Laden weitergeben können . Wenn in re Enten, alle Anwendungen Status existiert als Speicher oder einzelnes Objekt, was reduziert tun, ist einfach den Zustand in einer Aktion zu nehmen und neuen Zustand zurückzugeben, so dass Produzenten in Aktion basieren, den Zustand in einem reinen Weg ändern. Es gibt eine riesige Regel mit Reduzierstücken zu beachten, Sie dürfen nie den Staat direkt nehmen. Dies wird zu enormen Leistungslüften führen. Was wir also tun, ist, den Zustand zu nehmen und völlig neue Instanzen davon zurückzugeben, anstatt ihn einfach zu modifizieren. damit Lassen Sie unsdamiteinen Reduzierer-Ordner innerhalb unserer Quelle erstellen und dann einen Indexpunkt als Spaß deklarieren. Zunächst lassen Sie uns die Anzeigenerinnerungskonstante importieren aus sind Konstantenhalter. Und um zu beginnen, werden wir einen Produzenten als Konstante mit dem Namen der Erinnerungen haben. Es wird eine weitere anonyme Pfeilfunktion sein, und wir werden zwei Parameter haben, einen Zustandsparameter, der zu einem Anti-Array sowie in Aktionsparameter als zweites Argument initialisiert wurde. Jetzt ist es initialisiert, verfügbar in einem Reminders Reducer genannt Erinnerungen. Es wird einfach nicht später sein. Wir werden Erinnerungen Variable ändern, um einen Rückgabezustand zu werden. Denken Sie also daran, dass unsere Aktion den Typ zurückgibt, den wir diesen Typ verwenden könnten, um genau zu verstehen , wie wir unsere Erinnerungen für einen Zustand ändern möchten. Daher werden wir eine switch-Anweisung für den Aktionstyp verwenden, da wir in Zukunft mehr als eine Art von Aktion erwarten können . Außerdem, fügen Sie ERMINDER hinzu. Aber lassen Sie uns unseren ersten Fall betrachten, die Werbeerinnerung in diesem Fall ist, ändert Erinnerungen gut gesendete Erinnerungen wieder in eine Arena. Und dann werden wir eine nette Idee gebrauchen. Sechs. Trick, der als Spread-Operator bezeichnet wird, verteilt sich auf den Zustand, und was der Spread-Operator uns erlaubt, ist, den Inhalt eines oder eines Objekts in eine andere Rate oder ein anderes Objekt zu kopieren . Es ist sehr praktisch. Das erste Element in Erinnerungen an Regen wird also dieser aktuelle Spread-Zustand sein, und das nächste wird eine neue Erinnerung mit unseren Handlungen sein. Jetzt müssen wir diese Erinnerungsfunktionen definieren, so oben lassen Sie uns Helper Reminder Funktion definieren, die ein Argument für die Aktion annimmt, da sein Elternteil einfach Objekt als Erinnerung mit dem Text der Aktion Punkttext zurückgibt und dann und ich d von eine zufällige Variable Awesome waren sehr nah. Jetzt müssen wir diesen Erinnerungsminderer einzurichten. Lassen Sie uns Konsul, nicht loggen sind Erinnerungen als Zustand. Auf diese Weise können wir in Zukunft debuggen. Was würde Erinnerungen machen, natürlich. Und vergessen Sie nicht in einer switch-Anweisung, wir wollen immer den Standard und werden standardmäßig den Zustand von oben zurückgeben. Und wir sind uns sehr nah dran. Wir müssen nur exportieren. Unser Produzent sagte, dass andere Module es erkennen können, und jetzt können wir zurück zu Index-Berührungen gehen, um diese Luft endlich zu reparieren. Bevor wir fortfahren,müssen einige von Ihnen möglicherweise Ihren Entwicklungsserver neu laden, indem Sie Kontrolle C haben und NPMneu starten, weil wir gerade einen neuen Monat hinzugefügt haben. Bevor wir fortfahren, müssen einige von Ihnen möglicherweise Ihren Entwicklungsserver neu laden, indem Sie Kontrolle C haben und NPM Das ist es neu geladen. Geh weiter und warte. Und schließlich können wir Produzenten von unseren Produzenten importieren und dann werden wir einfach den Produzenten in unserem Geschäft argumentieren . Großartig. Sieht so aus, als ob unser Reduzierstück jetzt funktioniert. Und wir haben gerade eine Menge Zeit damit verbracht, über Redux-Händler und -Anbieter nachzudenken, einige wirklich grundlegende Redux-Konzepte, und wir sind tatsächlich einen Schritt näher gekommen, um unseren Anwendungsstatus mit Redux tatsächlich zu ändern . Ehrfürchtiger Job 6. Versenden an Requisiten und verbindliche Action: Versuchen wir nun, diesen Action-Schöpfer anzuschließen, den wir für ihre Anwendung gemacht haben. Zuerst müssen wir etwas mit ihrem Eingabefeld und ihrer Schaltfläche einrichten. Wir müssen einige Zustände der Komponente hinzufügen, so dass wir erkennen, was der Benutzer in das Textfeld eingibt. Also lassen Sie uns einen Konstruktor hinzufügen. Aber Requisiten denken Sie daran, wir brauchen Super-Requisiten ist die erste Zeile. Wir initialisieren sie Status als Objekt. Eine Menge von leerem Text für jetzt und dann auf dem Eingabefeld wird verwendet werden, sind auf Änderungsfunktion vertraut . Genau wie vorher. Wir werden Ereignisvariable haben, tatsächlich, und wir werden den Zustand unseres Textes setzen. Zwei. Ereignis. Nicht ins Ziel. Wertschätzen Sie nicht. Als Nächstes. Lassen Sie uns eine Anzeigenerinnerung definieren. Hilfe fermentiert mit ihrer Anwendung, so dass wir einfach Rat Dot protokollieren den Zustand für nichts anderes als sagen und Erinnerung in dieser Funktion wird einfach den Zustand dieser Startzustand protokollieren und lassen Sie es auf diese Schaltfläche anhängen. Klicken Sie auf. Also auf Klick gleich diesem Zeug. Erinnerung hinzufügen. Cooler Schlitz Sehen wir, sagen wir, ich muss Lebensmittel beim Läufer kaufen und da gehen wir. Wir haben unseren Text als Einkauf Lebensmittel in Zustand. Großartig. Jetzt, da wir unsere Techniker einloggen. Wir können fortfahren, um unsere Komponente Tour Store zu verbinden und der Action-Schöpfer, den wir erstellen, um mit unserem Geschäft in dieser Komponente zu verbinden, müssen die Vorteile von reagieren zu nehmen. Redux ist Connect-Funktion, daher importieren wir die Connect-Funktion von React Redux. Diese Connect-Funktion funktioniert, indem zwei Funktionen verbunden werden, um zu reagieren. Komponente verbindet zuerst eine Karte Zustände eine Requisiten-Funktion und Matt an Requisiten Funktion ausgeliefert . Wir werden noch über Matt State an Requisiten nachdenken müssen, aber wir werden jetzt eine Funktion namens Matt Dispatcher Prompts schreiben, weil wir unseren Werbe-Erinnerungs-Aktions-Ersteller an Anwendungen anschließen möchten . Also, bevor wir das tun , , lassen Sie uns wichtige Erinnerung von unseren Aktionen, wie wir speichern Neuladen und dann ganz unten nach einer Komponente, lassen Sie uns definieren und diese Dispatcher Requisiten Funktion, Mathematik Dispatcher-Requisiten. Es ist sehr einfach Kamel gehüllt genau so. In diesem Dispatcher-Requisiten müssen wir den Aktionsersteller an diese Anwendung halten, und dazu wird eine bestimmte Funktion namens Bind Action Creators benötigt, deren Import, der jetzt Bindungsaktionsersteller aus der regulären Redux Library importiert. Und ich werde das hier oben bewegen. Erinnerung hinzufügen. Ehrfürchtig. Lassen Sie uns nun diese spezielle Matte Dispatcher Requisiten Funktion deklarieren und das Dispatch-Argument übergeben . Und dann werden wir die Funktion „Bind Action Creators“ zurückgeben, die wir gerade hier importiert haben, da das erste Argument ein Objekt mit unserer Anzeigenerinnerungsfunktion sowie den Versand als zweites Argument hat. Also trage mit mir hier. Ich weiß, das sieht sehr kompliziert aus, diese Funktion genau hier, aber es wird deutlich Sinn ergeben. Was ist alles angeschlossen, und wir fangen an, es zu benutzen. Also gehen wir hin. Jetzt müssen wir es mit unserer Komponente verbinden wird die Verbindungsfunktion von Redux aufrufen. Ich erinnere mich daran, dass unser erstes Argument Kartenstatus zu Requisiten sein sollte, aber wir haben das noch nicht definiert, also nennen wir es. Nein, aber wir haben einen Kartenversand von Ernten, also streiten Sie es hier. Und dann werden wir unsere App-Komponente endlich angeschlossen haben, Nehmen wir an, und dann innerhalb hatte Erinnerung wir auch den Zustand protokollieren. Ich will auch Requisiten sehen. Also lasst uns einfach den Zustand herausnehmen und all das protokollieren, weil ich diese Punkt-Requisiten sehen möchte. Auf diese Weise können wir es sehen. Erinnerung hinzufügen. Eigentlich, auf unsere Komponente abgebildet. Sagen wir mal wieder, wir müssen Lebensmittel kaufen und es überprüfen. Wir haben ein richtiges Objekt, ein inneres Töpfchen Objekt. Wir haben jetzt unsere Anzeigenerinnerungsfunktion von Bind Action-Erstellern. Schauen wir uns unsere Aktionen noch einmal an, um zu sehen, wie Add Reminder funktioniert. Denken Sie daran, dass wir nur Text an die Anzeigenerinnerungsfunktion übergeben müssen. Also innerhalb ihrer Werbeerinnerungs-Hilfsmethode, lassen Sie uns diesen Stopp Requisiten Punkt und Erinnerung aufrufen und unseren Zustandstext übergeben. Entfernen Sie dieses Konsolenprotokoll, sagen wir und lassen Sie uns sehen, was passiert. Nun, wir haben eine Aktion. Eine Anzeigeerinnerung an den Typ. Fügen Sie Erinnerungstext hinzu, kaufen Lebensmittel und überprüfen Sie es aus oder reduzieren er. Auch Glück, da es erkennt Aktion. Ah, ganz neues Array-Anwesen, einschließlich unseres Objekts mit einem i d... von einem zufälligen I. D und R Texas Lebensmittel. Sieht aus, als ob Reduktion großartig funktioniert. Lassen Sie uns überprüfen, was tatsächlich passiert ist mit Matt, die an Requisiten gesendet wurde, dann was Map Dispatcher Requisiten im Wesentlichen tut, ist, dass es die Aktionsersteller, die wir erstellen, an die gesamte Dispatch-Funktion während unserer gesamten Redox Application Masonbindet erstellen, an die gesamte Dispatch-Funktion während unserer gesamten Redox Application Mason , die als Requisiten innerhalb dieser spezifischen Komponente zugänglich sind. Wenn wir die Connect-Funktion aufrufen Jetzt gibt es eine kleine Abkürzung. Schwächen tun, Da wir nur hinzufügen Erinnerung hinzufügen. Anstatt eine ganze Kartenversand von Requisiten Funktion zu haben, kann ich hier einfach kein Objekt haben. Fügen Sie Erinnerungen als Mikey und Value hinzu und nehmen Sie Kartendispatcher-Requisiten vollständig heraus. Wir werden retten. Warten Sie, bis es neu geladen wird. Lassen Sie uns Lebensmittel noch einmal kaufen und Sie werden feststellen, dass es immer noch funktioniert. Und jetzt müssen wir nicht einmal Kaufaktionierer importieren. Also lasst es uns aufgreifen. Es ist eine kleine Abkürzung, die Redux für uns bietet. Cool. Lassen Sie uns nun fortfahren, um tatsächlich Kartenstatus-Requisiten hinzuzufügen, damit wir den Redox-Zustand mit unserer Aktion aktualisieren und ihn auf unserer Benutzeroberfläche erkennen können. Hervorragende Arbeit. 7. Zuordnung von Zustand zu Props: Lassen Sie uns diesen Zustand für Requisiten definieren, so dass wir den Redox-Zustand innerhalb dieser Komponenten-Map erkennen können . Siehe Requisiten wird sehr einfach funktionieren, argumentieren wir, eine Funktion innerhalb des ersten Parameters der Reduktionen verbinden Funktion. Dies ermöglicht es uns, einen Zustand als Argument mit seiner früheren Funktion zu hören. Also lassen Sie uns den Kartenstatus für Requisiten genau hier definieren. Kameratasche es. Wie ich schon sagte, wir haben Staat als eines unserer Argumente. Moment werden wir einfach Punktgesetz konsul, den Staat als Staat, und jetzt können wir einfach in diesem Zustand an Requisiten an unsere Connect-Funktion übergeben. Vergiss nicht, zu retten. Lassen Sie uns nun das Element untersuchen. Auf diese Weise können wir sehen, was passiert, wenn wir eine Erinnerung hinzufügen. Also im Moment sagt es Karten in Requisiten und verbinden muss es zurück, um Objekt zu spielen. Nun, keine Sorge. Mal sehen, was passiert, als wir uns entschieden haben, eine Erinnerung hinzuzufügen. Wie auch immer, grüßen wir Oma. Okay, wir sehen hier einen neuen Zustand, und es ist unser Objekt, wie Sie mit unserem I d und dem griechischen Oma Text Cool sehen können. Es sagt uns also, wir sollen ein Flugzeug-Objekt zurückgeben, und genau das werden wir tun. Wir werden ein Ebenenobjekt drehen mit sind Erinnerungen als Zustand, weil dies genau so aussieht , was wir wollen, sind Erinnerungen Objekt zu sein, waren Erinnerungen sind Raten eher, Dies liegt daran, dass im Index Punkt Js Erinnerungen sind. Reducer ist der weltweite Reducer für unsere gesamte Anwendung. Nachdem wir dies gespeichert haben, löschen wir das Konsolenprotokoll des Zustands und konsumieren einfach Punktprotokoll-Requisiten innerhalb einer Renderfunktion und sehen, ob es aktualisiert wird. Ich sage, diese Stop Requisiten, speichern cool und sagen wir ja, wir mussten Oma begrüßen und sie sind Requisiten geht Also, nachdem wir unsere Erinnerung hinzufügen, die Requisiten hier sind Erinnerungen und es ist unsere Rate von einem genial. Nehmen wir uns einen kurzen Moment Zeit, um die Schönheit von Redux zu schätzen. Redox gibt uns so viel Macht, weil wir in jeder zukünftigen Komponente, die wir erschaffen, auf diesen Teil unseres globalen Staates zugreifen können . Wir müssen einfach unsere Komponente mit dem globalen Zustand in ähnlicher Weise verbinden, wie wir es hier mit der APP-Komponente getan haben , und dann haben wir jeden Aktions-Schöpfer kombiniert, der in der Zukunft neu definiert , um den Zustand aller unserer Komponenten und unserer gesamten Anwendung jetzt , in unseren früheren Anwendungen. Wir haben einfach den Zustand von einer Komponente zur anderen weitergegeben, weil wir sehr einfache Probleme bei der Verwaltung von Daten hatten . Aber stellen Sie sich vor, eine ganze Social-Network-Web-App wie Facebook oder Twitter könnte definitiv von einer Implementierung wie Redux profitieren, die jeder neuen Komponente den Zugriff auf den globalen Zustand ermöglicht . Und ich glaube, ihr werdet diese Art von sozialen Netzwerkanwendungen trainieren, Dinge, die wirklich kompliziert sind. Unabhängig davon haben wir jetzt eine Erinnerung in Requisiten. Lassen Sie uns also die Benutzeroberfläche erweitern, um dem Benutzer zu zeigen, dass er tatsächlich ein für allemal eine Erinnerung eingereicht hat. 8. Liste der Erinnerungen: Lassen Sie uns eine Komponente bauen, die das Rendern behandelt Erinnerungen sind. Wir haben jetzt Erinnerungen und Requisiten, und alles funktioniert gut, aber der Benutzer weiß das noch nicht. Lassen Sie uns also unsere Rendererinnerungen definieren. Hilfe beim Rendern von Erinnerungen in dieser Methode wurden auf geordnete Liste der vom Benutzer eingereichten Erinnerungen zurückgegeben . Also zuerst wollen Zugriff sind Erinnerungen Denken Sie daran, dass wir verwenden können. Und er hat sechs Trick, wenn Variablennamen sind und die Eigenschaft, die wir wollen, ist genau die gleiche. Also lasst uns Rat keine Erinnerungen protokollieren, um zu überprüfen, ob dies tatsächlich funktioniert, bevor ich es tue. Also werde ich dieses Konzert verlassen. Protokollieren Sie keine Requisiten. Sonst sprengt es unseren Konsul in die Luft, bevor du weiterziehst. Wir müssen das tatsächlich aufrufen, nicht Erinnerungen in unserer JSX rendern Und diese geschweiften Klammern erlauben es uns, einfach eine Funktion innerhalb der JSX selbst zu rendern oder zu verwenden . Sagen wir mal, ich muss es. Wenn Sie ein paar Lebensmittel kaufen, fügen wir eine Erinnerung hinzu. Und im Moment waren die Erinnerungen leer. Aber sobald es nicht leer ist, erhalten wir ein Array mit unserem Objekt. Großartig. Jetzt können wir das Konsul Log loswerden, von dem wir wissen, dass es Erinnerungen sind. Variable funktioniert. Und jetzt können wir tatsächlich fortfahren, um die UN-geordnete Liste und JSX zu erstellen, die steuern unsere Liste über Bergleute zu rendern. Also zuerst, denken Sie daran, mit JSX wollen wir immer die JSX zurückgeben. Wir können es einfach nicht aufschreiben. Dann haben wir eine neue geordnete Liste. Zunächst unser Klassenkamerad für die UN-Liste einige Reaktions-Food-Class-Namen sein. Also lasst uns gruppieren Liste Bindestrich Gruppe Raum. Wir werden die Säule benutzen, sm vier, was nur eine schöne Größe ist, die zu unserer Anwendung passt. Wir werden in dieser Zeit noch eine geschweifte Klammer haben. Wir werden Erinnerungen zuordnen, damit wir jede Erinnerung einzeln als eine andere Listenkomponente rendern können . Also wieder, wir müssen die JSX zurückgeben. Wir werden eine Liste J Sex-Tag haben. Unser Schlüssel wird eine Erinnerung sein, an die ich mich erinnere. Jede dieser Erinnerungen hat 90. Und dann wird dieser Klassenname für diese Listenkomponente ein Listengruppenelement sein. Es ist also ein Element in dieser Listengruppe, das wir mit einer Nordenliste erstellt haben. Cool. Dann haben wir eine Entwicklung mit nur unserem Erinnerungstext umsonst. Lass uns sparen und sehen, wie das aussieht. Also, wenn ich zu meinen Lebensmitteln. Da ist es. Was sie haben, um Oma zu begrüßen. Nein. Und da ist es, in einer sehr schönen Liste auftauchen. Jetzt will ich nicht, dass es zwischen dem Knopf liegt. Und das taten sie. Eigentlich möchte ich nach den ganzen Formkomponenten sprechen. Also lass es uns sagen, nachdem ich dann noch einmal jede Oma retten werde. Alles klar, cool. Und während wir dabei sind, ist es an der Zeit, einige unserer eigenen CSS zu dieser Anwendung hinzuzufügen. Nur damit das Aussehen ein wenig besser aussieht. Lassen Sie uns also eine neue CSS-Datei global innerhalb unserer Quellfaltung definieren. Es ist also ein neuer Datei-Index Punkt CSS. Das erste, was wir anvisieren werden, ist unsere At-Komponente. Also denken Sie daran, wir haben nicht den Klassennamen. Lassen Sie uns voran und geben Sie ihm eine Polsterung von etwa 20 Pixeln. Ich will nicht mehr, dass es die Zeichen berührt. Ich werde ihm eine Anzeige von Flex die Flex-Richtung geben. Alles wird Spalte sein, denn wenn Sie es für Zeile tun, wird alles jetzt Seite an Seite sein. Ich möchte normal sein in der normalen ruft, dass Sie jetzt sehen, was ist die Linie alles in die Mitte. Jetzt sollte unser Titel auch eine Textillinie im Zentrum haben. Machen wir es signifikant. Wir wollen, dass die Schriftgröße größer ist. Erhöhen wir es jetzt auf 26 Gurken. Das letzte, was wir tun müssen, ist Index-CSS in ihren Indexpunkt Js aufzunehmen. Also lassen Sie uns einfach Index Punkt CSS aus dem gleichen Verzeichnis importieren. Ich werde es sagen und ah hah, das sieht so viel besser aus als eine Größenänderung. ein bisschen mehr. Sie können sehen, dass dies eine echte in-line-Komponente ist. wir also, ich habe zu Was ist wieder? Der Einkauf von Lebensmitteln hat es noch nicht getan und das sieht jetzt viel besser aus. Ich denke, das könnte ein wenig Abstand gebrauchen. Gehen wir zurück zu CSS und ändern Sie dann die zugefügte Komponente, die wir alle Eingaben ändern möchten. Es ist für jetzt in Ordnung, denn wenn Sie später nur einen haben, möchten Sie vielleicht einen Klassennamen verwenden. Wir bekommen es nur einen Rand von fünf Pixeln und dann für App. Nennen wir dies einfach die Erinnerung für und dann wird unser Erinnerungsformular einige Polsterung von fünf Pixeln haben . Also lasst uns das nachsehen. Okay, das sieht wirklich gut aus. Und sagen wir, ich muss Sweet angeln gehen. Das sieht wirklich nett aus. So können wir jetzt mit der Implementierung einiger Funktionen übergehen, um Elemente aus dieser Liste zu löschen . Sagen wir, ich ging eigentlich angeln Nun, ich muss diese Erinnerung jetzt loswerden, weil du mich schon daran erinnert hast und es getan hast, also lass uns weitermachen. 9. Erinnerung löschen: Lassen Sie uns dem Benutzer eine Möglichkeit geben, die Erinnerungen zu löschen. Wir fügen unseren Komponenten ein wenig JSX hinzu. So hat der Benutzer eine Schaltfläche zum Klicken, mit der er eine Erinnerung aus der Liste sein kann . Wir werden ein sehr einfaches div hier haben. Lassen Sie uns ein paar Klassennamen geben. Dies wird eine Listenelementkomponente sein und auch aufgerufen werden, um zu verlassen. Aber jetzt, direkt daneben, werden wir es auch Listenelement nennen, weil wir in gelten für Stylings auf einmal auf beide von ihnen ist, dass sie würden sie nebeneinander so für Italien rendern, aber wir könnten ein sehr einfaches X haben wer auch immer lassen Sie uns ein kleines Unicode-Symbol verwenden, um es viel besser aussehen zu lassen. Dieses Unicode-Symbol ist Hash X 2715 hinzufügen und sieht im Grunde wie eine sehr Fleischmultiplikationsseite aus. Und vergiss das Semikolon nicht. Wenn wir also daran denken, eine Erinnerung zu löschen, klingt das definitiv wie eine Aktion, die den Zustand ändert. Dies bedeutet, dass wir unsere Leserlogik in der Anwendung hinzufügen. Wann immer wir hinzufügen, lesen Sie uns Logik. Wir müssen wirklich in drei Schritten darüber nachdenken. Zuerst definieren wir eine Konstante. Zweitens machen wir eine Aktion Schöpfer und dritte, und schließlich ändern wir oder erstellen eine reduzierte so, um alles zu starten, denken Sie daran, wir müssen ein neues Konzept erstellen. Also führe deinen bewussten Punkt Js Bach. Lassen Sie uns neue Konstante exportieren und nennen Sie es löschen Erinnerung gleich löschen für meine Jetzt haben wir Recht . Die eigentliche Funktion, die das Löschen behandelt, sind Erinnerungen innerhalb des Indexpunkts Js von Aktionen zuerst, wie die sportliche neue Konstante namens Delete Reminder. Und für jetzt, lassen Sie uns nur eine leere anonyme Pfeilfunktion haben. Jetzt lassen Sie uns eine Minute darüber nachdenken. Um zu löschen. Erinnerungen benötigen eine Möglichkeit, sie zu identifizieren. Zum Glück, ein i d für jede Erinnerung innerhalb unseres Reduzierers neu erstellen, so dass wir angeben könnten. Also lassen Sie uns einen i d Parameter zu diesem Argument hinzufügen. Jetzt fangen wir an, unsere Aktion zu definieren. Natürlich müssen wir Löscherinnerung Nein, aus einer Konstanten importieren . Und dann braucht diese Aktion natürlich natürlicheinen Typ, und dieser Typ wird gelöscht werden erinnern. Jetzt müssen wir darüber nachdenken, welche Informationen wir wollen. Aktion, um zu helfen. Lassen Sie uns einfach i d. Und dieser Schlüssel wird Idee sein, nein sowie ein Wert, den wir in Elite erinnern, bevor wir weitergehen , Nehmen wir an, Rat Dot Log Löschen Untätigkeiten. Alles klar, damit wir eine Möglichkeit haben, in der Zukunft zu debuggen. Und schließlich, lassen Sie uns diese Aktion zurückgeben. Als Nächstes müssen wir es an ihre Bewerbung binden. Also lasst uns wichtige Elite-Erinnerung von Aktionen Now. Jetzt müssen wir dies zu Ramat Dispatch von Requisiten Funktion hinzufügen. Und denken Sie daran, wir benutzen es. Brauchen Sie Redux Trick Toe, tatsächlich loszuwerden, dass Karte an Requisiten Deklaration gesendet wird, so dass wir einfach löschen Erinnerung platzieren können . Weiter, um Erinnerung hinzuzufügen. Hier und jetzt sehen wir die Schönheit von Essex als nützlich. Wir haben mehrere Schlüssel, aber es verkürzt unseren Code wirklich, wenn wir nicht jedes Mal angeben müssen, was die Werte dieser Schlüssel sind, da sie genau gleich sind. Nun, lassen Sie uns eine Hilfsmethode mit dem Klick auf ihre JSX-Schaltfläche verbinden, die wir früher eingerichtet haben, damit wir sehen können, was passiert im Vergleich zum Hinzufügen eines Löschens Ihre Hilfsmethode erinnern. Dieser wird auch ein I. D. V. Das ist Council Dot Log, das in Anwendung löscht. Und für jetzt, was sind Ratsprotokoll-Requisiten? Und für jetzt, Nur ein Scheck, ob wir tatsächlich tägliche Erinnerungen auf unserer Karte auftauchen. Dispatcher-Requisiten. schließlich Lassen Sie unsschließlichdas Click-Ereignis an das div anschließen, das zuvor erstellt wurde. Sagen Sie also auf Anonymous Ära Funktion, um diesen Punkt löschen Erinnerung aufzurufen. Und denken Sie daran, wir müssen das I. D.passieren D. also ist es eine Erinnerung, dass ich... Sagen wir, wir werden eine neue Erinnerung haben. Gehen Sie einkaufen. Lassen Sie uns zuerst das Weglassen untersuchen, und klicken Sie dann auf den Experten-Boom. Also dieser Stopp Requisiten. Wir sehen, dass wir eine tägliche Erinnerung tatsächlich versandt und führt eine Anwendung erhielt die I D, dass wir Grape löschen wollen Jetzt haben wir diese CSS-Elemente hinzugefügt, so lassen Sie uns weiter gehen. Und um diese Einträge zu finden, möchte ich, dass die Anzeige im Zeilenblock ist. Auf diese Weise richten sie sich Seite an Seite aus. Und dann wird unser Lösch-Button auf der rechten Seite schweben und eine Polsterung links von fünf Pixeln haben . So sieht es ziemlich schön aus. Du wirst es sehen, was? Ich habe vergessen zu spezifizieren, dass Float durch einen Doppelpunkt getrennt ist und noch einmal, sagen wir, gehen Lebensmitteleinkauf , Boom. Großartig. Also, jetzt, da wir unseren Aktionsersteller tatsächlich löschende Erinnerung. Wir müssen den Hersteller ändern, um den Antrag tatsächlich auf der Grundlage dieser versandten Aktion zu ändern. So sehen wir uns im nächsten Video. 10. Verkleinern der Listenkomponente: Nein, aber wir haben eine Möglichkeit, unsere Lieferung zu versenden. Ähm, in Aktion. Wir müssen das innerhalb unserer Erinnerungen Reducer erkennen. Dann können wir den Status für die Anwendung aktualisieren, um diese Erinnerung tatsächlich aus der Liste zu entfernen . Lassen Sie uns beginnen Hinzufügen Reminder-Fähigkeit zu einem reduzierten müssen wir importieren, um Erinnerung aus Konstanz zu verlassen beginnen. Dann fügen wir der switch-Anweisung hinzu, um auch Löscherinnerungsfall zu behandeln. Hübscher Hit Fall. Erinnerung löschen. Nun, der Regel sind Erinnerungen oder was auch immer. Statusrückgabe kann nicht direkt geändert werden. Wir müssen unseren Zustand in reiner Weise behandeln und unseren Zustand nicht direkt mit irgendwelchen Funktionen zum Manipulieren oder Erhöhen wie Gewürzdruck oder Pop modifizieren . Und die klang wie Tanzbewegungen. stattdessen Lassen Sie unsstattdessenkühl halten, halten Sie es rein und lassen Sie eine entfernt i D. Funktion kehrt in ihrem Harley New Array basierend auf unserem aktuellen Zustand zurück und ich d mit dem gleichen Zustand außer dem Objekt, das wir angegeben haben entfernt. Also lassen Sie uns erklären, dass entfernen Sie i d Funktion jetzt von i d entfernt Es wird zwei Parameter haben. Zuerst ein Zustandsparameter zu einem Interieur initialisiert, genau wie ein Erinnerungsminderer und auch ein I D-Primer. Als nächstes nutzen wir einen Array-Filter in JavaScript, da Filter genau wie die Kartenfunktion völlig neue Datenarrays zurückgeben, anstatt sie direkt zu ändern. Also lassen Sie uns ihre Erinnerungen konstant erklären, und sie werden sagen, Es ist unser Zustand, aber gefiltert eine Erinnerung nach dem anderen. Und das sieht aus wie eine anonyme Pfeilfunktion. Und was wir tun wollen, ist die Erinnerung herauszufiltern, deren I D unserer Vergangenheit entspricht. I d. Jetzt wird der Filter alles drehen, was passiert sind eine Qualitätsprüfung Solarrendite statt, ob der Erinnerungspunkt i D nicht gleich dem i D ist. So haben wir ein Array aller Objekte, die nicht gleich dem, dessen Idee war , indem Sie darauf klicken. Also werden wir sagen, wer ist Erinnerung Punkt i D ist nicht gleich der Idee, die wir angegeben. Lassen Sie uns unsere neuen Erinnerungen unsere neuen reduzierten Erinnerungen eher einloggen und zurückgeben. Schließlich fügen wir diese Funktion hinzu, rufen Sie ihren Löscherinnerungsfall auf. Also werden wir sagen, Erinnerungen ist gleich meine ich d wird unseren Zustand übergeben, wie war die Aktion bekam ich D, dass wir in unserer Aktion angegeben. Und dann lassen Sie uns weitermachen und unseren neuen Erinnerungszustand zurückgeben. Nun, bevor wir sparen, bemerkte ich einige Fehler bei unserer tatsächlichen Funktionsdekoration. Wir brauchen hier Gleichheitszeichen sowie ein Gleichheitszeichen hier für unsere eigentliche Pfeilfunktion. Also habt ihr das wahrscheinlich erwischt. Also sag nicht, bevor du das tust, also geh weiter und spare. Und jetzt lassen Sie uns den Moment untersuchen, um genau zu sehen, was vor sich geht. Lassen Sie uns eine neue Erinnerung hinzufügen. Kaufe Lebensmittel und lass uns sehen, ob wir es jetzt tun können. Beachten Sie, dass noch nichts passiert ist. Das liegt daran, dass eine App, die JSX immer noch vergessen hat, Delete Reminder aus unserer Dispatch-Aktion aufzurufen . Also lassen Sie uns voran und fügen Sie diesen Anruf speichern. Noch einmal, lassen Sie uns durch unsere Lebensmittel Click X und überprüfen Sie es. Wir haben eine neue Reduzierung Erinnerungen an ein leeres Array, und dort wird es gelöscht. Also ist es bei einem Paar kaufen Lebensmittel Boom, Boom, Boom, dass wir sie löschen. Kaufen Sie wieder Lebensmittel. Ich werde Lebensmittel eins kaufen und Lebensmittel kaufen, auch. Nehmen wir an, wir haben zuerst eins gemacht, und dann haben wir die ersten Lebensmittel gekauft und dann haben wir die zweite Lebensmittel gekauft, damit Sie sehen können , dass es spektakulär funktioniert. Wir werden bei Redux besser und setzen es schneller ein, und hoffentlich wird die Lese-US-Logik, die wir lernen, jetzt deutlich. Es wird nur intuitiver, wenn wir diese Anwendung weiterentwickeln, also gehen wir weiter. 11. Timestamping: An dieser Stelle scheint es, als hätten wir fast eine vollständige Anwendung. Dennoch können wir zusätzliche Funktionen hinzufügen, um Reminder Pro noch nützlicher für den Benutzer zu machen. In der Regel haben Erinnerungen ein Datum an sie eine bestimmte Zeit, dass die Person eine vollständige für die Erinnerung hat . Fügen wir dem JSX ein zusätzliches Eingabefeld hinzu, mit dem der Benutzer die Zeit auswählen kann, die die Erinnerungen machen sollen. Lassen Sie uns ein weiteres Eingabefeld direkt neben ihrem ersten hinzufügen 1 Dieser Klassenname wird auchSteuerelement gebildet werden, aber sein Steuerelement gebildet werden, Typ wird tagsüber lokal sein, was sich als nützlich erweisen wird, weil es eine Kalenderauswahlansicht zieht. Jetzt müssen wir einfach ein Fälligkeitsdatum innerhalb unseres Textes innerhalb unseres Bundesstaates initialisieren. Legen Sie es lieber auf eine leere Zeichenfolge fest. Nun lassen Sie uns die Vorteile der On Change-Funktion nutzen, genau wie oben, wie wir mit Text tun Also Ereignisvariable, dann werden wir den Zustand der sind Fälligkeitsdatum zu diesem Eingabe-Kraftstoffe Ereignis setzen. Entenziel schätzen nicht großartig, sagen wir, und wie Sie sehen können, haben wir jetzt eine Kalenderansicht, die wir manchmal einfügen können. Jetzt, wo wir unsere JSX eingerichtet haben, lassen Sie uns darüber nachdenken, was? Hinzufügen einer neuen Eigenschaft zu ihrem Werbe-Erinnerungs-Aktions-Ersteller bedeutet in Bezug auf unsere Redux-Logik, ich für einen, muss unseren tatsächlichen Aktions-Ersteller ändern, um nicht nur den Textwert, sondern auch das Fälligkeitsdatum zurückzugeben , das wir übergeben. Gehen wir also zu unserem Action-Schöpfer. Wir hatten hier Erinnerung hinzufügen, und lassen Sie uns einen zweiten Parameter des Fälligkeitsdatums haben, dann wird sehr einfach nicht nur zur SMS Kurzschrift zurückkehren, sondern auch unsere Pflicht. Dieser Schlüssel wird in Ordnung sein, da er genau dem Wert entspricht, den wir übergeben. Erinnern Sie sich an Essex Kurzschrift. Als nächstes müssen wir darüber nachdenken, Erinnerungen in unserem Reduzierstück hinzuzufügen. Gehen Sie also zu Ihren Reduzierstücken und gehen Sie zur Helfer-Erinnerungsfunktion und bemerken Sie, dass unser Produzent einfach eine Aktion ergreift. Im Moment mappen wir Text zu Aktion, doc-Text, Wer auch immer Fälligkeitsdatum Interaktion passiert. Wir können auch einfach unseren Text und ihr Fälligkeitsdatum auf einmal erfassen, indem wir ihn mit der Aktion ausgleichen. Und das sind die Essex, die sich wieder als nützlich erweisen. Lassen Sie uns diesen Text Aktion Punkttext hier entfernen, bitte. Text nach i d sowie unsere Pflicht war, er hatte diesen Safe. Das sollte ausreichen, um Fälligkeitsdaten innerhalb aller Aktionsobjekte für Erinnerungen zu haben. Jetzt geht es einfach darum, den Akt von GSX zu verändern. Aufruf zur Erinnerung an die Anzeige. Daher möchten wir auch, dass unser Fälligkeitsdatum an unsere neue Anzeigenerinnerungsfunktion weitergegeben wird. Moment, lassen Sie uns den Rat einloggen, um zu sehen, ob wir tatsächlich ein Fälligkeitsdatum bekommen. Lassen Sie uns es dies passieren, der besagt, dass die Pflicht sparen würde. Lassen Sie uns das Element jetzt und bei unserer ersten Erinnerung inspizieren, um zu sehen, was los ist, Nehmen wir an, ich muss zum Zahnarzt gehen. Diese Erinnerung wird am Samstag um drei Uhr Pierre und cool sein. Wir haben Erinnerungen in unserem Staat, und diese Objekte haben jetzt Fälligkeitsdaten in ihnen. Ehrfürchtig. Nun, da wir ein paar Termine haben, könnten wir diese auf Erinnerungskarten werfen. jedoch Wir können siejedochfür den Benutzer noch verständlicher machen, indem wir einige Job-Skript-Tricks verwenden. Es sei denn, Sie möchten diese Datumszeichenfolge dorthin werfen. So sehen Sie im nächsten Video, wo wir tatsächlich beginnen, diese Daten auf der Benutzeroberfläche 12. Augenblicke mit MomentJS interpretieren: zuerst nach oben. Nun lassen Sie uns dieses Fälligkeitsdatum einschließen. Innerhalb unserer Erinnerung werden Ihre Reiben sehr einfach ein Element neben unserem Fälligkeitstext hinzufügen und ein Diff haben, das unsere Erinnerungspflicht umschließt. Also gehen, um Erinnerungen zu rendern, finden Sie Ihren Erinnerungstext und lassen Sie uns ein weiteres DIV neben unserem Erinnerungstext. Das ist nur ein Erinnerungspunkt-Fälligkeitsdatum. Jetzt wollen wir diese ganze Sache als Listenelement selbst umschließen. Lassen Sie uns unseren Erinnerungstext um ein div wickeln. Noch ein Tag in der Schließung Tag und gehen Sie voran und greifen Sie diese Erinnerung Detektiv. Platzieren Sie es daneben. Auf diese Weise wird es direkt neben unserem Lösch-Button gerendert. Jetzt geh weiter und spart. Lassen Sie uns eine weitere Erinnerung hinzufügen. Gehen Sie noch einmal zum Zahnarzt. Ich weiß es. Wählen Sie ein zufälliges Datum, sagen wir, 12 Uhr und da gehen wir. Wir haben unsere Erinnerungstexte unten gerendert. Jetzt möchte ich es akzentuieren. Eine einfache Möglichkeit, dies zu tun, besteht darin, einige Krieg JSX auszunutzen und es in ein End-Tag einzuwickeln, das kurz für betonen ist, was ihm im Wesentlichen ein nachtkursiges Aussehen verleiht. Und dann, noch einmal, müssen wir bei einer Erinnerung 12 Cloth Pete und cool. Jetzt, da es betont wird, haben wir es kursiv. Unsere Daten sehen also gut aus, aber es scheint so zu sein, als würde ein Roboter interpretieren wollen, nicht menschliche Benutzer. Also wollen wir diese JavaScript-Zeichenfolge in einen menschenfreundlichen Zeitstempel verwandeln. Zum Glück haben Software-Ingenieure dieses Problem bereits gelöst, indem sie ganze Bibliotheken geschrieben haben, die genau dieser Funktionalität gewidmet sind. Gehen wir also zurück zum Terminal und installieren Sie eine Bibliothek namens Moment. Stellen Sie sicher, dass Sie sich in Ihrem aktuellen Projektverzeichnis befinden, also beschichten Sie React, Reminder pro oder welches Verzeichnis Sie Ihre Reaktionsprojekte in einem NPM-Installationsmoment und sicher als Nebennotiz haben . Das Tolle an der Entwicklung mit React ist, dass Sie bereits Zugriff auf die Tausende von JavaScript-Bibliotheken haben, um Ihre Anwendung zu verbessern. Es ist nur ein paar Klicks auf Google, ein paar Minuten Lesen und eine NPM-Installation entfernt. Also, jetzt, da wir es einen wichtigen Moment von Moment an an der Spitze unserer JSX-Anwendung installiert haben , ist es wichtiger Moment von Ich werde nicht Jetzt lassen Sie uns einige Moment Logik zu unseren Erinnerungen Fälligkeitsdatum hinzufügen , so finden Sie die Erinnerung fällig Datum, und wir verwenden Momente von jetzt Funktion, die ein Job-Skriptdatum nimmt und zurück zu dem menschlich freundlichen Schrumpfen, das dieses Datum interpretiert . Also zuerst wird mir dieser Text ein JavaScript-Datum sein. Also lassen Sie uns ein neues Datum erklären und argumentieren die Erinnerung Fälligkeitsdatum als der erste Prender. Jetzt müssen wir diese ganze Sache in einem Moment schreiben. Objekt, und dann gehen wir voran und rufen von jetzt an. Kamel ummantelt. Lassen Sie uns speichern und überprüfen, wie es auf der Reminder Pro-Anwendung aussieht. Also noch einmal, ich bin immer noch nicht zum Zahnarzt für 25 Uhr 12 Uhr gegangen und genial. Sieht das nicht so viel besser aus? Anreize. Nachdem, dass wir suchen JavaScript String, die sagt 2017 1 25 t 12. Es steht nur in 11 Tagen, schön und Fleisch. Nun lassen Sie uns einige zusätzliche Funktionalität Prozess hinzufügen. Das am meisten fehlende an dieser App, Komponente oder Anwendung im Allgemeinen im Vergleich zu anderen ist, dass, wenn wir die Seite aktualisieren , wir mit einem sauberen Schiefer beginnen. jedoch Im Idealfall möchten wirjedochauf die gleichen Erinnerungen zugreifen, die wir zuvor hinzugefügt haben, wenn wir die Anwendung erneut besuchen, damit wir Cookies im Browser des Benutzers nutzen können , eine lokale Historie aller ihrer Erinnerungen haben. Lassen Sie uns diese gemischte 13. Backen Browser Cookies: Lassen Sie uns die Probleme von Benutzern lösen, die alle ihre Erinnerungen jedes Mal hinzufügen müssen, wenn sie zur Anwendung zurückkehren. Eine Lösung besteht darin, alle Erinnerungen in Cookies zu speichern. Also, anstatt eine ganze Bibliothek für Cookies selbst zu schreiben, der kranke Vorteil eines NPM-Pakets namens SF Cookies wurde speziell gebaut, um eine Reaktion Projekte Zugriff auf einen Browser-Cookies zu handhaben , so gehen Sie zurück zum Terminal und laufen NPM. Installieren Sie SF-Cookies Jetzt müssen wir darüber nachdenken, wann wir tatsächlich mit Stern und Cookies umgehen müssen , wenn wir eine Erinnerung hinzufügen. Nun, wir beschäftigen uns immer mit Änderungen sind Erinnerungen im Zustand innerhalb unserer Reduzierstücke, so ist es sinnvoll, Cookies zu backen und Cookies zu entfernen, wenn wir eine Erinnerung hinzufügen oder ERM löschen unter, so dass es zurück zu Ihrem Reduzierer-Index Punkt Js und lassen Sie uns importieren zwei Methoden von SF-Cookies. Sie Cookie und lesen Cookie von S F Cookies. Und diese Methoden sind Schlangengeschmack anstatt Kamel Fall, wenn Sie diese unterstrichen Trennung es anstatt einen Großbuchstaben. Jetzt ist es bei einem Aufruf von Big Cookie in unserem Werbe-Erinnerungs-Fall. Also lassen Sie uns diesen Rat entfernen nicht lange Aussage. Und sagen wir einfach, wir wollen den Cookie groß und das hat zwei Parameter. Der erste Parameter ist die eigentliche Flagge wird Ihnen Baker Kochen in wollen. Und dann ist es das JavaScript-Objekt oder -Array, das wir starten möchten. So großer Cookie von Erinnerungen sind Erinnerungen in Ordnung. Nun sollte das ausreichen, um den Erinnerungscookie in unseren Browser hinzuzufügen. jedoch Wir möchtenjedochauch jedes Cookie lesen, das wir bereits bei ihrem letzten Besuch dieser Anwendung gespeichert haben. Also lassen Sie uns einen Aufruf hinzufügen, um Cookie von Erinnerungen am Anfang unseres Produzenten zu lesen. Also werden wir sagen, dass unser Zustand gleich ist Cookie of Reminders zu lesen, so dass dies anstelle eines NT-Arrays initialisiert wird . Was auch immer wir gespeichert haben, lesen Cookie of Reminders. Cool, lassen Sie es uns aufstellen. Also geh voran und speichere nichts, um noch aufzutauchen. Aber sobald ich etwas Neues wie gehen Lebensmitteleinkauf mit einem Fälligkeitsdatum von Freitag bis zum 20. um einen PM hinzufügen, heißt es gehen Lebensmitteleinkauf in sechs Tagen, einige gehen zu aktualisieren Boom, und es ist immer noch da. Großartig. So, jetzt, wo wir sehen Erinnerungen arbeiten nach einem freien frisch. Jetzt müssen wir nur eine gelöschte speichern, eine Erinnerung als gelöscht, wann immer wir löschen. Und es ist so einfach. Wir werden einen weiteren nennen es einen großen Keks mit der gleichen Erinnerungsflagge. Backen Sie auch unsere neuen Erinnerungen. So sind wir vorbei sind aktualisiert ein regen und es ersetzt nur den Cookie, der zuvor gespeichert wurde . Ich werde voran gehen und zuschlagen. Sparen. Es wird wieder geladen. Hier haben wir noch eine Erinnerung. Lassen Sie es uns jetzt als Neuladen löschen und es ist immer noch weg. Großartig. Nun, da wir sehen, dass funktioniert, lassen Sie uns eine weitere Funktion hinzufügen. Wie wäre es mit dem Versuch, alle Erinnerungen auf einmal zu löschen? So sehen wir uns im nächsten Video. 14. Alle Erinnerungen löschen: Lassen Sie uns dieser Anwendung eine weitere Funktion hinzufügen, eine Schaltfläche, die es einem Benutzer ermöglicht, alle ihre Erinnerungen mit einem Zug zu erstellen. Lassen Sie uns zuerst Ihre Redux-Logik nähern. Denken Sie daran, dass wir, wenn wir unserer Redux-Anwendung neue Funktionen hinzufügen, in drei Schritten nähern. Für den ersten Schritt. Fügen wir eine neue Konstanten zu den Konstanten dot Js fuck hinzu. Wir werden eine neue Konstante exportieren, die klare Erinnerungen genannt wird, anstatt gleich klare Erinnerungen. Gehen wir zu unseren Aktionen Index Herzogin und Export, ein neuer Aktionsersteller namens Clear Reminders. Export verursachte Erinnerungen. Stellen Sie sicher, dass wir Pfeilfunktion definiert haben. Und mit diesem alten, müssen wir keine Daten weitergeben. Lassen Sie uns einfach in Aktion oder einfaches JavaScript-Objekt mit dem Typ löschen Erinnerungen zurückkehren. Natürlich müssen wir sicherstellen,dass wir klare Erinnerungen von unseren ständigen Fickfluten importiert haben. Natürlich müssen wir sicherstellen, Fügen Sie Erinnerungen aus Konstanz, und dann werden wir Objekt zurückgegeben, dessen Typ klar Erinnerungen Jahr für Monate jetzt ist, müssen wir unsere Erinnerungen Reducer ändern musste solche s der Produzenten zu indizieren. Lassen Sie uns zunächst klare Erinnerungen importieren , und dann ändern wir unseren Reduzierer, um einen weiteren Fall zu behandeln. Klare Erinnerungen. Wir werden Erinnerungen an ein leeres Array setzen. Und dann machen wir unseren Cookie noch einmal mit unseren Erinnerungen, Flaggen und Erinnerungen. So wird es gespeichert würde nie wieder klare Erinnerungen. Und dann müssen wir diese Erinnerungen zurückgeben. Großartig, lasst uns retten. Und auf der JSX-Taste, die aufgerufen wird, sind klare Erinnerungen. eigentlich, Vergisseigentlich,dass ich diesen j-Sex-Kopf zur Renderfunktion handeln musste. Und nach diesem Punkt werden Rendererinnerungen ein neues DIV-Element hinzufügen. Es ist Klasse Name wird TTN und Schaltfläche Gefahr sein, die die Farbe auf rot und auf Klicken schaltet. Wir werden einfach diese Stopp-Requisiten nennen, nicht klare Erinnerungen und im Text. Nun, schreiben Sie einfach klare Erinnerungen. Bevor das funktioniert,müssen wir sicherstellen, dass wir diesen Aktionsersteller an unsere Requisiten binden. Bevor das funktioniert, So wird neben dem Löschen Erinnerung am unteren Rand unserer Verbindungsfunktion hinzugefügt, löschen Sie von unders und oben. Ich werde überprüfen, ob wir tatsächlich klare Erinnerungen von Aktionen importiert haben und wir noch nicht, also lasst uns fortfahren und klare Erinnerungen aus Aktionen importieren. Lass es uns speichern und testen. Da ist also unser Nuklear-Erinnerungsknopf. Nehmen wir an, ich muss einkaufen gehen, natürlich, am 18. 12. Das ist also eine Erinnerung. Sagen wir, ich muss mit Tom angeln gehen. Ich weiß nicht, wer Thomas, aber es scheint, als will er angeln gehen. Sagen wir, wir machen das an der 31. und einer letzten Sache. Nehmen wir an, ich muss den Zahnarzt besuchen. Lauf und lass uns voran und lösche die Erinnerungen und sie sind sie alle weg und ist nicht nachladen. Keine Erinnerungen mehr. Prächtig. Alles funktioniert, und wir haben gerade unsere erste Redox-Anwendung abgeschlossen. Herzlichen Glückwunsch. Ich hoffe, dass dies hilft, etwas Licht auf die manchmal komplex aussehende Bibliothek von Redux zu werfen. Es fühlt sich wirklich nicht zu kompliziert an, wenn Sie daran denken, in drei Schritten zu denken eine Konstante und Handlung in Aktion zu haben. Schöpfer im Reduzierstück Alle zu speichern sind ein riesiges Zustandsobjekt, das wir so viel mehr über React gelernt haben, einige neue Tricks gelernt haben und natürlich alles über die Redox-Bibliothek. Bei der Prüfung „Building Reminder Nächstes eine Zusammenfassung und eine Herausforderung angezeigt. Wir haben eine ganz andere Redux-Befürwortung, und dieses Mal wird es die Authentifizierung auf einem Server beinhalten. So kann es kaum erwarten, mit Ihnen anzufangen zu beschichten. Es gibt