Beginnen Sie mit Redux Thunk

Zustand ist ein großer Teil einer Reaktionsanwendung, weshalb Redux allgemein mit sich gekoppelt ist. Diese Daten stammen oft aus einer Datenbank, die eine Anforderung und eine Antwort erfordert. Für einige Anwendungen kann diese Kommunikation konstant sein. Es kann schwierig sein, ausschließlich innerhalb der Reaktionskomponenten zu verwalten.

Dies führt auch neue Probleme ein - was passiert, wenn es langsam lädt, oder lädt überhaupt nicht? Jede Komponente, die sich mit asynchronen Daten befasst, müsste Logik enthalten, um diese Szenarien zu behandeln.

Ein "Thunk" ist ein Konzept, das bei dieser Situation helfen kann. Jede Thunk ist eine Funktion, die eine andere Funktion zurückgibt. Diese Funktion kann dann zu einem späteren Punkt aufgerufen werden, ähnlich wie ein Rückruf. Wenn wir ein Thunk anstelle eines Aktionsobjekts versenden könnten, können wir eine zusätzliche Logik in Reaktion auf ein anderes Ereignis hinzufügen.

Redux Thunk ist eine Bibliothek, die zwischen versendeten Aktionen und dem Reduzierer sitzt. Wenn es sich um ein Thunk handelt, gibt es einige Methoden in die zurückgegebene Funktion, mit der weitere Aktionen, wie ein Erfolgs- oder Fehlerereignis, verwendet werden können.

• 20 brillante Jquery-Plugins

In diesem Tutorial nutzen wir von Thunks, um dazu beizutragen, die Daten von einem Server als von einer JSON-Datei zu ziehen, und arbeiten mit Photoshare. - Eine von Redux angetriebene Anwendungsanwendung.

Erhalten Sie ein neues Site-Projekt, aber Sie müssen es einfach bleiben? Hier sind unsere Guides zum Besten Webseitenersteller und Web-Hosting Bedienung. Akten mit anderen teilen? Bekomm dein Cloud-Speicherung. richtig.

Laden Sie die Dateien herunter für dieses Tutorial.

01. Installation von Abhängigkeiten

Es gibt zwei Teile dieses Projekts - die Front-End-Site und der Rücken-End-Server, auf dem es ausgeführt wird. Während sich das Tutorial auf das vordere Ende konzentriert, benötigen wir einen Server, um die Fotos abzurufen. Laden Sie die Projektdateien herunter und installieren Sie die Abhängigkeiten sowohl für die Site als auch für den Server. Führen Sie die Server für beide aus und lassen Sie sie im Hintergrund laufen lassen.

 / * ein terminal innerhalb / site * /
& gt; Garn
& gt; Garn-Start
/ * ein Terminal innen / server * /
& gt; Garn
& gt; Garn Start 

02. Middleware einrichten

Redux thunk ist ein Middleware - Funktionalität, die zwischen Aktionen und Reduzierern sitzt, die sich ändern können, wie sich diese Aktionen verhalten. Redux unterstützt mehrere Middle-Sets, die die gesamte Anwendung abdecken. Sie werden hinzugefügt, wenn der Laden mit der erstellt wird komponieren Methode. Fügen Sie Middleware an die hinzu schaffen Methode in Index.js.

 Import {ApplyMiddleware, Compose}
von "redux";
thunk von "redux-thunk" importieren;
[...]
cost store = createstore (
wurzeldrreducer,
komponieren(
ApplyMiddleware (Thunk),
Devtools
)
); 

03. Action-Ersteller einrichten

Das erste, was wir jetzt tun müssen, ist, die Fotos in die Galerie zu laden. Wie regelmäßige Aktionen brauchen wir Action-Schöpfer für die verschiedenen Zustände, die ein asynchroner Anruf annehmen wird. Die meisten werden haben Start , Erfolg und Error Aktionen. Diese lassen Redux wissen, was das JavaScript beschäftigt ist. Innerhalb Aktionen / Fotos / Fotos.js , Richten Sie drei Action-Schöpfer für diese verschiedenen Zustände ein.

 Export const const loadgallerystart = () = & gt; ({{
Typ: load_gallery_start});
Export Const LoadGallerySuccess =
Fotos = & gt; ({{
Typ: load_gallery_success,
Fotos
});
Export Const LoadGalleryError = () = & gt; ({{
Typ: load_gallery_error}); 

04. Erstellen Sie einen Thunk zum Laden

Thunks arbeiten genau das gleiche wie Action-Schöpfer. Wir versenden den Rückgabewert immer noch, aber diesmal gibt es eine Funktion anstelle eines Objekts zurück. Die Middleware, die wir früher eingerichtet haben, werden eine Dispatch-Methode in die zurückgegebene Funktion übergeben. Dadurch können wir nach dem anfänglichen Versand mehr Aktionen an Redux senden. Ein ... kreieren Loadgallerie Methode, die eine Funktion zurückgibt. Sollte es vorerst eine Aktion abgeben, um zu zeigen, dass die Galerie noch geladen wird.

 Export Const LoadGallery = () = & gt;
Dispatch = & gt; {
Versand (LoadgalleryStart ());
}; 

05. Daten vom Server laden

Wir sind jetzt bereit, von dem Server abzurufen, den wir am Anfang eingerichtet haben. Wir können dies tun, indem wir es verwenden Axios - ein Paket, das mit Versprechen in verschiedenen Browsern zusammenarbeitet. Importieren Axios und stellen Sie eine Anfrage für die Fotos innerhalb Loadgallerie . Wenn das Versprechen auflöst, versenden Sie die Erfolgsaktion, und wenn nicht die Fehleraktion absendet. Damit ist die Struktur des Thunks abgeschlossen.

 Importieren von Axios von "Axios";
[...]
RETURN AXIOS.
.Get ("http: // localhost: 3001 / photos")
. Dann (Antwort = & GT; Versand (
LoadgallerySuccess (Antwort.Data)))
.catch (() = & gt; Versand (
LoadgalleryError ())); 

06. Versand des Thunk

Der Thunk wird nichts tun, bis es versandt wurde. Wir können das innerhalb einer Reaktionskomponente wie jede andere Aktion tun. Eine gute Zeit, um das Laden der Fotos zu laden, ist, wenn der Benutzer die Hauptgalerie anzeigt. Wir können React verwenden componentdidmount. Lifecycle-Methode als Trigger, nachdem Sie die Galerie überprüft, ist nicht bereits geladen. Innerhalb Komponenten / Container / Galerie / Galerie.js Versendung A. Loadgallerie Aktion, indem Sie es hinzufügen MapDispatchtoprops. und nenne es in componentdidmount. .

 componentdidmount () {
wenn (! this.props.photosloaded) {
das.Props.loadGallery ();
}
}
EXPORT COND MAPDISPATCHTOPROPS =
 Dispatch = & gt; ({{
Loadgallery: () = & gt;
Versand (Loadgallery ()),
}); 

07. Fügen Sie beim Erfolg Fotos hinzu

Wenn die Fotos vom Server zurückkommen, versenden wir a Load_gallery_success. Aktion mit den Fotos. Wir müssen dies durch die Fotos Reduzierer Nachgehen Reduzierungen / Fotos / Fotos.js und fügen Sie einen Fall für die Erfolgsaktion hinzu. Die Nutzlast enthält alle Fotos als Array. Sobald der Status aktualisiert wurde, übermittelt der Fotoauswahl die Fotos an die anzuzeigende Galeriekomponente.

 case load_gallery_success:
RETURN Action.photos; 

08. Richten Sie die Benutzeroberfläche ein

Derzeit erscheinen die Fotos plötzlich, nachdem sie geladen wurden. Bei einer langsameren Verbindung schaut der Benutzer auf einen leeren Bildschirm, bis die Anforderung abgeschlossen ist, wenn es jemals tut. Die Aktionen, die wir zum Laden von Fotos senden, können auch in der UI-Reduziermaschine abgeholt werden, um die Schnittstelle auf dem neuesten Stand zu halten, was passiert. Aktualisieren Sie die Lade- und Fehler-Flags in den UI-Reduzierer bei Reduzierer / ui / ui.js .

 case load_gallery_error:
zurückgeben {... staat,
Laden: FALSE, ERROR: TRUE};
case load_gallery_start:
zurückgeben {... staat,
Laden: TRUE, ERROR: FALSE};
case load_gallery_success:
zurückgeben {... staat,
Laden: FALSE}; 

09. Lade- und Fehlerwahlschalter hinzufügen

Wie bei den Galeriefotos selbst benötigen wir Selektoren, um die verschiedenen Werte der UI-Status aus Redux zu erhalten. Wir können diese in die Galerie übergeben, die dann verschiedene Elemente rendern, wenn entweder einer wahr ist. Im Selektoren / Ui / ui.js , fügen Sie ein paar Funktionen hinzu, um die Werte herauszuholen.

 export const isgalleryufored =
 staat = & gt; staat.ui.error;
export const isgalleryloading =
 staat = & gt; staat.ui.loading; 

10. Fügen Sie Daten zu GalleryContainer hinzu

Mit den selektierten Selektoren können sie jetzt hinzugefügt werden Galerie Containerkomponente. Wenn Sie sie hinzufügen, bedeutet dies, dass die für das Anzeigen der Galerie verantwortliche Komponente nicht wissen muss, wie die Daten eingetroffen sind. Nachgehen Container / Galerie / Galerie.js und fügen Sie die Selektoren hinzu KartenstatetoProps. . Machen Sie Konstanten für die Werte, um den Status im nächsten Schritt anzuzeigen.

 const {Fehler, Laden,
 Fotos} = dies.Props;
[...]
export const mapstatetoprops =
 staat = & gt; ({{
Fehler: IsgalleryRored (staat),
Laden: IsgalleryLading (Bundesland),
 }); 

11. Laden und Fehlerzustand anzeigen

Während wir den Fehler haben und Requisiten laden, gibt es derzeit keine UI, um anzuzeigen, wann sie aktiv sind. Diese Requisiten sind boolesche Werte, dh wir können die Anzeige von Komponenten umschalten, wenn sie wahr sind. Aktualisieren Sie die Render-Methode, um sicherzustellen, dass das & lt; fehler & gt; und & lt; laden & gt; Komponenten rendern anstelle der Galerie bei Bedarf.

 Wenn (Fehler) {
Rückkehr & lt; Fehler / & gt ;;
}
Wenn (Laden) {
Rückkehr & lt; Laden / & GT ;;
} 

12. Holen Sie sich wieder die Galerie

Mit der geladenen Galerie können wir zu einem einzelnen Foto weitergehen. Wenn Sie in eine der Fotos klicken und die Seite erfrischen, wird das Foto nicht geladen, da auf dieser Seite keine Anweisung auf dieser Seite vorhanden ist, um die Galerie zu laden. Öffnen Container / Foto / photo.js und laden Sie die Galerie in componentdidmount. wie in der Galerie Komponente. Das photosloaded. Die Überprüfung versucht nicht, die Fotos erneut zu laden, wenn sie bereits in die Galerie geladen wurden.

 Wenn (! This.Props.photosLaded) {
das.Props.loadGallery ();
} 

13. Fügen Sie einen neuen Kommentar hinzu

Der Benutzer kann auf das Foto klicken, in dem sie einen Kommentar hinterlassen möchten. Die Foto-Präsentationskomponente leitet die Zusatzkommunikation. Prop-Funktion, wenn dies geschieht. In der. Zusatzkommunikation. Funktion, Berechnen Sie den Punkt, an dem der Benutzer in das Foto geklickt hat. Der Server erfordert einen runden ganzgerechten Prozentsatz, wenn er gespeichert wird.

 const photo = e.target
 .getBoundingClientRect ();
const top = e.clientx - photo.left;
bild links = e.clienty - Foto.top;
const toppc = mathe.round ((Top /
 photo.width) * 100);
const linksatz = math.round ((links /
 photo.hight) * 100); 

14. Sag Redux über den Kommentar

Mit der berechneten Position müssen wir dann Redux über den Kommentar erzählen, damit er das Kommentarformular anzeigen kann. Es gibt bereits ein Aktion, um den neuen Kommentar auf dem Bildschirm hinzuzufügen. Hinzufügen Zusatzkommunikation. in MapDispatchtoprops. und rufen Sie es an, nachdem wir die Position des Klicks berechnet haben.

 This.Props.AddNewComment
 TOPPC, LIPPPC);
[...]
EXPORT COND MAPDISPATCHTOPROPS =
 Dispatch = & gt; ({{
AddNewComment: (oben, links) = & gt;
Versand (AddNNEWCOMMENT (oben, links)),
});

15. Sag Photo über den neuen Kommentar

Wenn neue Kommentarinformationen an Redux übergeben werden, müssen wir ihn in die Fotow-Präsentationskomponente weitergeben. Dies ermöglicht es, das Formular an dieser Position anzuzeigen. Finde das GETNEWOMATION Selektor, fügen Sie es hinzu KartenstatetoProps. und passieren Sie die Prop & lt; Foto & gt; .

 Export const mapstatetoprops =
 (Zustand, Requisiten) = & gt; ({{
Neukommission: GETNEWCOMMENT (STATE),
});
& lt; Foto [...] NewComment = {
 This.Props.NewComment} / & gt; 

16. Rufen Sie thunk im Kommentar an

Wenn Sie auf das Foto klicken, wird das neue Kommentarformular angezeigt. Dies ist seine eigene verbundene Komponente. Wenn das Formular eingereicht wird, ruft es a auf Vorderkundung. PROP-Funktion und wird bestanden. Dies ist ein Thunk, den wir machen werden. Aufmachen Container / Newcomment / Newcomment.js und füge das thunk zu MapDispatchtoprops. . Bestehen Sie diese Requisition in die gerenderte Präsentationskomponente.

 & lt; Newcomment [...]
 SUBERTCOMMENT = {SUBERTCOMMENTCOMMENT} / & GT;
EXPORT COND MAPDISPATCHTOPROPS =
 Dispatch = & gt; ({{
Vorwahlkommission: Kommentar = & gt; Versand(
Vorderkassette (Kommentar))
});

17. Sammeln Sie den Inhalt für Thunk

Der Thunk, um einen neuen Kommentar hinzuzufügen, hat eine ähnliche Struktur zum Abrufen der Galerie, einschließlich eines Start-, Erfolgs- und Fehleraktion. Es gibt ein zusätzliches Argument, das in dieses Thunk passiert ist - das aufstechen Funktion. Dies ermöglicht den direkten Zugriff auf den aktuellen Status, um Daten davon zu ergreifen. Erstellen Sie das Vorderkundung. thunk in. Aktionen / Neukommission / Newcomment.js . Jeder Kommentar ist einem Foto und einem Benutzer zugeordnet. Für dieses Tutorial ist die Benutzer-ID nicht in die Nutzer Reduzierer

Export const devortcomment = kommentieren
 = & gt; (Versand, GetState) = & gt; {
Versand (SubmitCommentstart ());
const currentphotoid =.
getcurrentphotoid (GetState ());
const user =.
GetCurrentuser (GetState ());
const {links, top} =
GETNEWCOMMENT (GETSTATE ());
}; 

18. Veröffentlichen Sie die Anfrage

Mit allen notwendigen Daten können wir den Kommentar einreichen. Axios hat A. Post Methode zum Umgang mit POST Anfragen, mit dem zweiten Argument die Daten, die in dieser Anfrage gesendet werden sollen. Fügen Sie die Anforderung an den Thunk hinzu, indem Sie Daten in SNAKE-Hülle eingeben, um das, was der Server erwartet, übergeben.

 RETURN AXIOS
.Post(
"http: // localhost: 3001 / kommentare", {
user_id: user.id,
photo_id: currentphotoid,
Kommentar,
links,
oben
}) 

19. Griff Erfolg und Fehler

Wenn das Versprechen von Axios aufgelöst oder abgelehnt wird, müssen wir die Anwendung darüber informieren. Wenn es sich erfolgreich auflöst, gibt der Server den Inhalt des Kommentars zurück. Wir sollten das mit der Erfolgsaktion bestehen. Wenn es abgelehnt wird, feuern Sie eine Fehleraktion ab. Aktualisieren Sie das Versprechen mit dann und Fang Blöcke.

 .das (({Daten: {
 ID, kommentieren, links, top}}) = & gt;
Versand(
SUMPIENTCOMMENTSUCCESS (
ID, Kommentar, links, oben,
Benutzer, currentphotoid)
)
)
.catch (() = & gt; Versand (
 SubmitCommentError ())); 

20. Kommentar zu Foto hinzufügen

Im Moment, wenn der Kommentar erfolgreich hinzugefügt wird, wird er vom Bildschirm gelöscht, ist jedoch nicht sichtbar, bis die Seite aktualisiert wird. Wir können den Fotos-Reduzierer aktualisieren, um den neuen Kommentar abzuholen, und fügen Sie ihn dem Kommentar-Array hinzu, um sich wie den Rest anzuzeigen. Öffnen Sie Reduzier- / Fotos / Fotos.js und fügen Sie einen Fall hinzu, um mit der Aktion umzugehen. Erstellen Sie eine Kopie des Status, um sicherzustellen, dass wir den vorhandenen Zustand nicht versehentlich mutieren.

 Fall Submit_comment_success:
const {id, kommentieren, top, links,
Benutzer, photoId} = action.payload;
const newstate = json.parse (
Json.stringify (staat));
const photo = newstate.find (
photo = & gt; photo.id === photoId);
photo.chment.push ({{
ID, Kommentar, links, oben, Benutzer
});
Neustate zurücksenden; 

21. Verstecken Sie andere Kommentare

Wenn ein anderer Kommentar offen ist und der Benutzer einen neuen Kommentar hinzufügen möchte, wird die Benutzeroberfläche zu unübersichtlich. Wir sollten das Kommentarfeld ausblenden, wenn ein neuer Kommentar komponiert wird. Wir können in das Bestehende einhaken Add_new_comment. Aktion, um das zu löschen Kommentar Wert. Nachgehen Reduzierer / ui / ui.js und fügen Sie einen Fall dazu hinzu.

 Fall Add_new_Comment:
Rückkehr {
...Zustand,
Kommentare: undefined.
}; 

Dieser Artikel wurde ursprünglich in Ausgabe 283 des kreativen Webdesign-Magazins veröffentlicht Webdesigner . Kaufen Sie das Thema 283 hier oder Abonnieren Sie den Webdesigner hier .

Zum Thema passende Artikel:

• 5 Awesome Javascript-APIs
• Wiederverwendbare Reaktionskomponenten entwickeln
• 9 der besten Javascript-Frameworks