Wir werden weiter an der App arbeiten, die wir im letzten Kursmodul mit unseren Rezepten hier
und mit den Filtern, die wir einstellen könnten, usw. erstellt haben. Außerdem müssen wir zwei Dinge hinzufügen, wo wir Redux benötigen.
Eine ist, dass wir ein Rezept tatsächlich als Favorit markieren können, indem wir auf dieses Sternsymbol klicken, dass dies tatsächlich als Favorit markiert wird
und dass wir dieses Symbol auch ändern, um zu zeigen, ob dies bereits ein Favorit ist oder nicht, aber was noch wichtiger
ist: dass wir
dieses Rezept hier auf der Registerkarte Favoriten als Favorit sehen können. Und die andere Sache, bei der wir Redux benötigen,
ist hier in den Filtern. Wenn wir einen Filter einstellen und diesen dann speichern, sollte dies
natürlich Auswirkungen auf die Mahlzeiten haben, die wir hier auf unserer Registerkarte Mahlzeiten in der Liste von laden Mahlzeiten, wenn wir eine
Kategorie auswählen. Dort sollte
sich dies widerspiegeln, was wir auf den Filtern eingestellt haben. Daran arbeiten wir, woran wir Redux brauchen, und
dafür installieren wir Redux und legen los.
Um mit Redux zu beginnen, beende ich meinen Expo-Server hier,
den npm-Startvorgang, beende ihn vorübergehend und installiere ein Paket. Das wäre
Redux. Zusätzlich zu Redux müssen
wir auch React Redux installieren, da dies der Fall ist auch erforderlich, um dann mit Redux
zu arbeiten.
Daher müssen beide Pakete hier installiert werden, und während der Installation können wir dort bereits ein
wenig an unseren Codedateien arbeiten, da ich in diesem Projekt jetzt einen neuen Ordner hinzufügen möchte und es sich
um den Speicherordner handelt.
Jetzt können Sie diesen Ordner beliebig benennen. Er muss nicht als Speicher bezeichnet werden. Redux ist
das egal, aber dies ist der Ordner, in dem ich mein Redux-Setup verwalten möchte, da es bei Redux nur um
diesen zentralen Statusspeicher geht.
Hier in diesem Store-Ordner können wir jetzt mit Redux beginnen und ich werde Redux hier nicht im Detail behandeln. Ich habe einen
vollständigen React and
Redux-Kurs dafür, wenn Sie die Vor- und Nachteile davon lernen möchten, z In diesem Kurs
gehe ich von vorherigen React- und Redux-Kenntnissen aus und daher wird dies nur eine kurze Auffrischung sein.
Am Ende dreht sich bei Redux alles um Reduzierungen, Aktionen und den Aufbau eines Geschäfts basierend auf diesen
Reduzierungen und Aktionen.
Dazu füge ich hier in diesem Speicherordner einen Aktionsordner und einen Reduzierungsordner hinzu. Eigentlich haben wir in diesem Projekt nur eine
Aktions- und eine Reduzierungsdatei, aber wenn Sie mehr Dateien als diese hatten, haben Sie Separate Unterordner könnten eine
gute Idee sein, um sie organisiert zu halten, und deshalb erstelle ich sie hier,
obwohl wir das für diese einfache App nicht brauchen würden, weil wir nicht so viele Dateien haben.
Beginnen wir mit dem Reduzierer. Im Reduziererordner
hier füge ich meine Mahlzeiten hinzu. js-Datei und das ist die Datei, in der ich die Aktualisierungslogik für den Status des Essensreduzierers
verwaltet habe.
Das ist also am Ende die Datei, in der wir die Logik zum Markieren einer Mahlzeit als
Favorit und zum Verwalten unserer Filter schreiben.
Jetzt ist ein Reduzierer in React nur eine Funktion. Hier
werde ich eine Funktion erstellen, sie als Reduzierer für Mahlzeiten bezeichnen, der Name liegt ganz bei Ihnen und
diese Funktion erhält tatsächlich zwei Argumente - den Status, den aktuellen Status-Snapshot, auf dem Sie aufbauen können einen neuen Zustand ableiten,
da ein Reduzierer am Ende einen neuen Zustand zurückgeben muss, der dann von Redux übernommen
und in seinem Speicher gespeichert wird.
Sie erhalten hier also den aktuellen, den alten Status und die Aktion, da die Reduzierungsfunktion hier von
Redux ausgeführt wird, wenn
eine neue Aktion ausgelöst wird. Daher erhalten wir hier Zugriff auf die Aktion, damit wir
herausfinden können, ob wir handeln müssen und was wir tun müssen.
Innerhalb dieser Funktion müssen Sie am Ende einen neuen Zustand zurückgeben. In seiner einfachsten Form
bedeutet dies natürlich, dass wir den aktuellen Zustand zurückgeben, was andererseits bedeutet, dass dieser Reduzierer
nichts Nützliches tut, aber wir werden es tun ändere das.
Wenn wir unsere App zum ersten Mal ausführen, möchten wir auch einen Anfangszustand einrichten, der
anfänglich verwendet wird. Dadurch
wird unser Zustand beim Start dieser App initialisiert. Dazu füge ich hier eine neue Anfangszustandskonstante hinzu, die ein
einfaches Javascript enthält Objekt und dort möchte ich eine Liste meiner Mahlzeiten und dann auch eine Liste meiner gefilterten Mahlzeiten speichern, da wir
beide benötigen - eine Liste aller Mahlzeiten und eine Liste der Mahlzeiten, die zu den Filtern passen, die der
Benutzer und ich festgelegt haben Ich möchte auch meine Lieblingsgerichte hier haben. Also drei Arten von Essensarrays, die ich am Ende speichere, und das ist
natürlich
nur ein möglicher Ansatz, den Sie hier verfolgen
können. Wir können hier sicherlich andere Möglichkeiten finden, unsere Daten zu verwalten, aber ich mag diesen.
Was ich jetzt in dieser Datei brauche, sind meine Dummy-Daten für Mahlzeiten, also importiere ich Mahlzeiten aus meinem Datenordner
und dort aus den Dummy-Daten. js file und ich initialisiere die Mahlzeiten hier mit meinem Dummy-Datenarray für Mahlzeiten.
Damit werden auch gefilterte Mahlzeiten initialisiert, da zu Beginn dieser App
keine Filter eingerichtet sind. Lieblingsgerichte hingegen sind anfangs leer, da wir beim Start der
App keine Lieblingsgerichte haben.
Natürlich möchten Sie in einer echten App diesen Status möglicherweise auf einem Server speichern, damit Sie nicht wieder von
vorne anfangen, wenn der Benutzer die App schließt und später wiederkommt,
aber das tun wir hier nicht
Im weiteren Verlauf dieses Kurses erfahren Sie, wie Sie sich an einen Server wenden, dort Daten speichern und Daten von
dort in
separaten Modulen laden. Hier wird es einfach sein, sich auf Redux zu konzentrieren.
Dies ist also mein Anfangszustand. Hier in dieser Funktion können wir jetzt eine Javascript-Syntax verwenden, bei
der wir unseren Anfangszustand als Standardwert für das Zustandsargument zuweisen. Dies bedeutet, dass wenn diese
Reduzierungsfunktion ausgeführt wird und der Zustand undefiniert ist, was der Fall ist, wenn Redux führt unseren Reduzierer zum
ersten Mal aus. Wir
beginnen mit diesem Anfangszustand, sodass dann automatisch
unser Anfangszustand geladen wird, so dass beim Starten und Starten von Redux eine erste Aktion ausgelöst wird
Wird verwendet, um den Reduzierer einmal zu durchlaufen, und dann wird unser Ausgangszustand geladen.
Damit können wir mit einem Anfangszustand arbeiten, der nett ist, der uns allein aber nicht allzu
viel hilft. Im Moment verbinden
wir diesen
Reduzierer jetzt mit Redux, sodass wir unseren Redux-Store tatsächlich überall in der App verwenden können, bevor wir dann mit dem
Versenden von Aktionen beginnen und weitere nützliche Dinge im Reduzierer erledigen. Daher werde ich hier vorerst nur den
Essensreduzierer als Standard hier und jetzt in der App exportieren. js ist die Datei, in der unsere
gesamte App startet.
Wir müssen unseren Redux-Store einrichten. Dafür
importieren wir hier create store aus Redux.
Außerdem müssen wir von dort Mähdrescherreduzierer importieren.
Auf diese Weise können wir jetzt ein Geschäft erstellen. Wir benötigen
lediglich unseren Reduzierer. Hier importiere ich meinen Essensreduzierer aus und zeige jetzt auf den Ladenordner, den Reduziererordner und dort
auf die Mahlzeiten. js Datei und
jetzt vielleicht hier können wir unseren Shop hier erstellen, indem wir create store aufrufen. Jetzt erstellt create store am Ende einen Reduzierer, den
Sie übergeben müssen. Jetzt haben wir hier natürlich einen Reduzierer,
und wir könnten dies weitergeben, aber in größeren Apps haben Sie möglicherweise mehr als einen
Reduzierer, da Sie häufig Reduzierer für die verschiedenen Funktionsbereiche Ihrer App haben, einen für die Authentifizierung, einen für Ihre Produkte. Nehmen
wir zum Beispiel den Support-Bereich Ihrer App an, und Sie müssen all diese einzelnen Reduzierungen, diese verschiedenen Reduzierungen, zu
einem Root-Reduzierer zusammenführen. Genau das tun die kombinierten Reduziererfunktionen. Auch hier würden wir
sie nicht benötigen, da wir nur einen Reduzierer haben Aber um Ihnen bereits den Ansatz
zu zeigen, den Sie auch mit
mehreren Reduzierern verwenden können, werde ich ihn auch hier verwenden. Also werde ich hier meinen Root-Reduzierer haben, den ich
durch Aufrufen von kombinierten Reduzierern erstelle. Kombinierte Reduzierer nehmen ein Javascript-Objekt, in dem wir jetzt unsere einzelnen Reduzierer, unsere
verschiedenen Reduzierer, Schlüsseln zuordnen.
Zum Beispiel könnten wir hier Mahlzeiten als Schlüssel nehmen, aber dieser Name liegt ganz bei Ihnen und verbinden dies
wie folgt mit dem Reduzierer für Mahlzeiten.
Dies führt letztendlich dazu, dass dieser Mahlzeitreduzierer mit diesem Wurzelreduzierer zusammengeführt wird, und wir werden später in der Lage sein,
mit Hilfe dieser Mahlzeiten mit dem vom Mahlzeitreduzierer verwalteten Zustand zu
arbeiten, also mit diesem Zustand, der so initialisiert wird Eigenschaft, wir können später auf diesen Status
zugreifen, auf diesen
Teil des Status mit dieser Eigenschaft, aber Sie werden all das sehen.
Das ist also unser Root-Reduzierer, und jetzt müssen wir nur noch den Root-Reduzierer übergeben, um ein Geschäft
zu erstellen. Dies gibt uns ein Geschäft und was nun?
Jetzt muss dieser Speicher für unsere Anwendung bereitgestellt werden, und dafür benötigen wir das
andere Paket, das wir installiert haben, nämlich React Redux.
Von dort können wir die Provider-Komponente importieren, Provider wie diesen. Am Ende wickeln wir den Anbieter am Ende um unsere Root-App-Komponente, also um
die oberste Komponente, die alle anderen Komponenten enthält, die eventuell mit unserem Geschäft interagieren, und der
Essensnavigator ist dafür ziemlich gut geeignet, da er alle unsere
Bildschirme enthält, also alle Komponenten, die wir eventuell benötigen, um Aktionen auszulösen oder auf unseren
Status zuzugreifen, lesen Sie also aus unserem Status. Daher wickeln wir hier die Anbieterkomponente um den Essensnavigator und
jetzt nimmt der Anbieter eine wichtige Eigenschaft, eine Requisite, die Sie übergeben müssen, und das ist die Requisite
des Geschäfts, und natürlich geben wir dort unseren Wert als Wert an.
Dieser konstante Speicher, in dem sich der erstellte Speicher befindet, wird an den Anbieter der Store-Requisiten übergeben. Hinter den Kulissen erhalten
wir alles, was wir für die Interaktion mit Redux benötigen. Der Redux-Store befindet sich in einer beliebigen Komponente, einem
beliebigen Bildschirm oder einer anderen Komponente in unserer Anwendung .
Lassen Sie mich dies jetzt mit npm start neu starten und im Moment wird dies keinen großen
Unterschied machen, aber unsere App sollte auf jeden
Fall noch funktionieren, so dass sie aus diesem Grund nicht abstürzen sollte. Lassen Sie uns also einfach überprüfen, ob dies der Fall ist, und lassen
Sie uns Hier neu laden, wir drücken r zweimal auf Android und befehlen r auf iOS und lassen uns sehen, wo das noch geladen wird, ja, das sieht hier auf
iOS gut aus und ich bin ziemlich sicher, dass es auch auf Android gut geladen wird. Ja, das funktioniert auch.
Jetzt ist Redux eingerichtet, unser
Shop ist initialisiert, aber wir verwenden es nicht.
Lassen Sie uns als nächsten Schritt sicherstellen, dass wir unseren Laden nutzen, bevor wir uns dann um Aktionen kümmern
und echte Arbeit im Reduzierer leisten.