Beginnen Sie mit Redux Thunk

Beginnen Sie mit Redux Thunk

Der Status ist ein wichtiger Bestandteil einer React-Anwendung, weshalb Redux häufig mit dieser Anwendung gepaart wird. Diese Daten stammen häufig aus einer Datenbank, für die eine Anforderung und eine Antwort erforderlich sind. Für einige Anwendungen kann diese Kommunikation konstant sein. Es kann schwierig sein, nur innerhalb von React-Komponenten zu verwalten.

Dies bringt auch einige neue Probleme mit sich - was passiert, wenn es langsam oder gar nicht geladen wird? Jede Komponente, die sich mit asynchronen Daten befasst, müsste Logik enthalten, um diese Szenarien zu handhaben.



Ein 'Thunk' ist ein Konzept, das in dieser Situation helfen kann. Jeder Thunk ist eine Funktion, die eine andere Funktion zurückgibt. Diese Funktion kann dann zu einem späteren Zeitpunkt aufgerufen werden, ähnlich wie ein Rückruf. Wenn wir einen Thunk anstelle eines Aktionsobjekts auslösen könnten, könnten wir als Reaktion auf ein anderes Ereignis eine zusätzliche Logik hinzufügen.



Redux Thunk ist eine Bibliothek, die sich zwischen ausgelösten Aktionen und dem Reduzierer befindet. Wenn ein Thunk ausgelöst wird, werden einige Methoden an die zurückgegebene Funktion übergeben, mit denen weitere Aktionen wie ein Erfolgs- oder Fehlerereignis ausgelöst werden können.

In diesem Tutorial verwenden wir Thunks, um die Daten von einem Server abzurufen, anstatt von einer JSON-Datei, mit der gearbeitet wird PhotoShare - eine Fotokommentaranwendung von Redux.



Sie haben ein neues Site-Projekt, müssen es aber einfach halten? Hier sind unsere Guides zu den Besten Webseitenersteller und Web-Hosting Bedienung. Dateien mit anderen teilen? Bekomm dein Cloud-Speicher richtig.

Laden Sie die Dateien herunter für dieses Tutorial.

01. Abhängigkeiten installieren

Erste Schritte mit Redux Thunk: Installieren Sie Abhängigkeiten



Führen Sie beide Server aus und lassen Sie sie ihre Arbeit erledigen

Dieses Projekt besteht aus zwei Teilen: der Front-End-Site und dem Back-End-Server, auf dem es ausgeführt wird. Während sich das Tutorial auf das Frontend konzentriert, benötigen wir einen Server, um die Fotos abzurufen. Laden Sie die Projektdateien herunter und installieren Sie die Abhängigkeiten für die Site und den Server. Führen Sie die Server für beide aus und lassen Sie sie im Hintergrund laufen.

/* one terminal inside /site */ > yarn > yarn start /* one terminal inside /server */ > yarn > yarn start

02. Middleware einrichten

Redux Thunk ist ein Middleware - Funktionen, die zwischen Aktionen und Reduzierungen liegen und das Verhalten dieser Aktionen ändern können. Redux unterstützt mehrere Middleware-Sätze, die die gesamte Anwendung abdecken. Sie werden hinzugefügt, wenn der Store mit dem erstellt wird komponieren Methode. Fügen Sie Middleware zum hinzu createStore Methode in index.js.

import { applyMiddleware, compose } from 'redux'; import thunk from 'redux-thunk'; [...] const store = createStore( rootReducer, compose( applyMiddleware(thunk), devtools ) );

03. Richten Sie Aktionsersteller ein

Das erste, was wir jetzt tun müssen, ist, die Fotos in die Galerie zu laden. Wie bei normalen Aktionen benötigen wir Aktionsersteller für die verschiedenen Zustände, die ein asynchroner Aufruf annehmen wird. Die meisten werden haben Start , Erfolg und Error Aktionen. Diese informieren Redux darüber, was das JavaScript gerade tut. Innerhalb Aktionen / Fotos / Fotos.js Richten Sie drei Aktionsersteller für diese verschiedenen Zustände ein.

export const loadGalleryStart =() => ({ type: LOAD_GALLERY_START }); export const loadGallerySuccess = photos => ({ type: LOAD_GALLERY_SUCCESS, photos }); export const loadGalleryError =() => ({ type: LOAD_GALLERY_ERROR });

04. Erstellen Sie einen Thunk zum Laden

Thunks funktionieren genauso wie Action Creators. Wir senden immer noch den Rückgabewert, aber dieses Mal wird eine Funktion anstelle eines Objekts zurückgegeben. Die zuvor eingerichtete Middleware übergibt eine Versandmethode an die zurückgegebene Funktion. Dies ermöglicht es uns, nach dem ersten Versand weitere Aktionen an Redux zu senden. Ein ... kreieren loadGallery Methode, die eine Funktion zurückgibt. Lassen Sie es vorerst eine Aktion auslösen, um anzuzeigen, dass die Galerie noch geladen wird.

export const loadGallery = () => dispatch => { dispatch(loadGalleryStart()); };

05. Daten vom Server laden

Wir können jetzt mit dem Abrufen von dem Server beginnen, den wir zu Beginn eingerichtet haben. Wir können dies tun, indem wir Axios - Ein Paket, das entwickelt wurde, um mit Versprechungen in verschiedenen Browsern zu arbeiten. Importieren Axios und fordern Sie die Fotos an loadGallery . Wenn das Versprechen aufgelöst wird, senden Sie die Erfolgsaktion und, falls nicht, die Fehleraktion. Damit ist die Struktur des Thunks vollständig.

import axios from 'axios'; [...] return axios .get('http://localhost:3001/photos') .then(response => dispatch( loadGallerySuccess(response.data))) .catch(() => dispatch( loadGalleryError()));

06. Versende den Thunk

Erste Schritte mit Redux Thunk: Versenden Sie den Thunk

Ein nicht versendeter Trödel ist ein nutzloses Stück Müll

Der Thunk wird nichts tun, bis er versandt wurde. Wir können das innerhalb einer React-Komponente wie jede andere Aktion tun. Ein guter Zeitpunkt, um mit dem Laden der Fotos zu beginnen, ist, wenn der Benutzer die Hauptgalerie anzeigt. Wir können React's verwenden componentDidMount Lebenszyklusmethode als Auslöser, nach Überprüfung der Galerie ist noch nicht geladen. Innerhalb Komponenten / Container / Galerie / Galerie.js Versand a loadGallery Aktion durch Hinzufügen zu mapDispatchToProps und nenne es innerhalb componentDidMount .

componentDidMount() { if (!this.props.photosLoaded) { this.props.loadGallery(); } } export const mapDispatchToProps = dispatch => ({ loadGallery: () => dispatch(loadGallery()), });

07. Fügen Sie Fotos zum Erfolg hinzu

Beginnen Sie mit Redux Thunk: Fügen Sie Fotos zum Erfolg hinzu

Sobald die Fotos angekommen sind, werden sie an die Galeriekomponente übergeben

Wenn die Fotos vom Server zurückkommen, versenden wir a LOAD_GALLERY_SUCCESS Aktion mit den Fotos. Wir müssen dies durch die Fotos Reduzierstück. Gehe zu Reduzierungen / Fotos / Fotos.js und fügen Sie einen Fall für die Erfolgsaktion hinzu. Die Nutzdaten enthalten alle Fotos als Array. Sobald der Status aktualisiert wurde, leitet die Fotoauswahl die Fotos an die Galeriekomponente weiter, die angezeigt werden soll.

case LOAD_GALLERY_SUCCESS: return action.photos;

08. Richten Sie die Benutzeroberfläche ein

Derzeit werden die Fotos nach dem Laden plötzlich angezeigt. Bei einer langsameren Verbindung wird der Benutzer auf einen leeren Bildschirm schauen, bis die Anforderung abgeschlossen ist, falls dies jemals der Fall sein sollte. Die Aktionen, die wir zum Laden von Fotos senden, können auch im UI-Reduzierer abgerufen werden, um die Benutzeroberfläche auf dem neuesten Stand zu halten. Aktualisieren Sie die Lade- und Fehlerflags im UI-Reduzierer unter Reduzierstücke / ui / ui.js. .

case LOAD_GALLERY_ERROR: return { ...state, loading: false, error: true }; case LOAD_GALLERY_START: return { ...state, loading: true, error: false }; case LOAD_GALLERY_SUCCESS: return { ...state, loading: false };

09. Lade- und Fehlerauswahl hinzufügen

Wie bei den Galeriefotos selbst benötigen wir Selektoren, um die verschiedenen UI-Statuswerte aus Redux herauszuholen. Wir können diese an die Galerie übergeben, die dann verschiedene Elemente rendert, wenn eines der beiden wahr ist. Im Selektoren / ui / ui.js. Fügen Sie einige Funktionen hinzu, um die Werte zu ermitteln.

export const isGalleryErrored = state => state.ui.error; export const isGalleryLoading = state => state.ui.loading;

10. Fügen Sie GalleryContainer Daten hinzu

Wenn die Selektoren bereit sind, können sie jetzt zum hinzugefügt werden Galerie Containerkomponente. Wenn Sie sie hier hinzufügen, muss die für die Anzeige der Galerie verantwortliche Komponente nicht wissen, wie die Daten angekommen sind. Gehe zu container / Gallery / Gallery.js und fügen Sie die Selektoren hinzu mapStateToProps . Erstellen Sie Konstanten für die Werte, um den Status im nächsten Schritt anzuzeigen.

const { error, loading, photos } = this.props; [...] export const mapStateToProps = state => ({ error: isGalleryErrored(state), loading: isGalleryLoading(state), });

11. Lade- und Fehlerstatus anzeigen

Erste Schritte mit Redux Thunk: Lade- und Fehlerstatus anzeigen

Stellen Sie sicher, dass der Fehler und die Ladekomponenten bei Bedarf angezeigt werden

Während wir den Fehler haben und Requisiten laden, gibt es derzeit keine Benutzeroberfläche, die angibt, wann sie aktiv sind. Diese Requisiten sind Boolesche Werte, was bedeutet, dass wir die Anzeige von Komponenten umschalten können, wenn sie wahr sind. Aktualisieren Sie die Rendermethode, um sicherzustellen, dass die und Komponenten werden bei Bedarf anstelle der Galerie gerendert.

schlechte Künstler, die denken, dass sie gut sind
if (error) { return ; } if (loading) { return ; }

Wenn die Galerie geladen ist, können wir zu einem einzelnen Foto übergehen. Wenn Sie auf eines der Fotos klicken und die Seite aktualisieren, wird das Foto nicht wieder geladen, da auf dieser Seite noch keine Anweisung zum Laden der Galerie vorhanden ist. Öffnen container / Photo / Photo.js und laden Sie die Galerie in componentDidMount wie in der Galerie Komponente. Das Fotos Geladen check versucht nicht, die Fotos erneut zu laden, wenn sie bereits in die Galerie geladen wurden.

if (!this.props.photosLoaded) { this.props.loadGallery(); }

13. Fügen Sie einen neuen Kommentar hinzu

Erste Schritte mit Redux Thunk: Fügen Sie einen neuen Kommentar hinzu

Verwenden Sie die addNewComment Requisitenfunktion zum Hinzufügen von Kommentaren

Der Benutzer kann auf das Foto klicken, auf dem er einen Kommentar hinterlassen möchte. Die Fotopräsentationskomponente führt die aus addNewComment Prop-Funktion, wenn dies passiert. In der addNewComment Funktion, berechnen Sie den Punkt, an dem der Benutzer auf das Foto geklickt hat. Der Server benötigt beim Speichern einen runden ganzzahligen Prozentwert.

const photo = e.target .getBoundingClientRect(); const top = e.clientX - photo.left; const left = e.clientY - photo.top; const topPc = Math.round((top / photo.width) * 100); const leftPc = Math.round((left / photo.height) * 100);

14. Erzählen Sie Redux von dem Kommentar

Nachdem die Position berechnet wurde, müssen wir Redux über den Kommentar informieren, damit das Kommentarformular angezeigt werden kann. Es ist bereits eine Aktion eingerichtet, um den neuen Kommentar auf dem Bildschirm hinzuzufügen. Hinzufügen addNewComment in mapDispatchToProps und rufen Sie es auf, nachdem wir die Position des Klicks berechnet haben.

this.props.addNewComment( topPc, leftPc); […] export const mapDispatchToProps = dispatch => ({ addNewComment: (top, left) => dispatch(addNewComment(top, left)), });

15. Erzählen Sie Photo von einem neuen Kommentar

Wenn neue Kommentarinformationen an Redux übergeben werden, müssen sie an die Fotopräsentationskomponente übergeben werden. Dadurch kann das Formular an dieser Position angezeigt werden. Finden Sie die getNewComment Selektor, fügen Sie es hinzu mapStateToProps und geben Sie die Requisite in .

export const mapStateToProps = (state, props) => ({ newComment: getNewComment(state), });

16. Rufen Sie thunk im Kommentar an

Erste Schritte mit Redux Thunk: Rufen Sie Thunk im Kommentar auf

Erstellen Sie einen Thunk, um einem Foto einen Kommentar hinzuzufügen

Wenn Sie jetzt auf das Foto klicken, wird das neue Kommentarformular angezeigt. Dies ist eine eigene verbundene Komponente. Wenn das Formular gesendet wird, wird a aufgerufen submitComment Requisitenfunktion und wird bestanden. Dies ist ein Thunk, den wir machen werden. Aufmachen container / NewComment / NewComment.js und füge den Thunk hinzu mapDispatchToProps . Übergeben Sie diese Requisite in die gerenderte Präsentationskomponente.

export const mapDispatchToProps = dispatch => ({ submitComment: comment => dispatch( submitComment(comment)) });

17. Sammeln Sie Inhalte für Thunk

Der Thunk zum Hinzufügen eines neuen Kommentars hat eine ähnliche Struktur wie das Abrufen der Galerie, einschließlich einer Start-, Erfolgs- und Fehleraktion. Es gibt ein zusätzliches Argument in diesem Thunk - das getState Funktion. Dies ermöglicht den direkten Zugriff auf den aktuellen Status, um Daten daraus abzurufen. Erstellen Sie die submitComment thunk in Aktionen / newComment / newComment.js . Jeder Kommentar ist einem Foto und einem Benutzer zugeordnet. In diesem Lernprogramm ist die Benutzer-ID in der fest codiert Nutzer Reduzierstück.

export const submitComment = comment => (dispatch, getState) => { dispatch(submitCommentStart()); const currentPhotoId = getCurrentPhotoId(getState()); const user = getCurrentUser(getState()); const { left, top } = getNewComment(getState()); };

18. Senden Sie die Anfrage

Mit allen erforderlichen Daten können wir den Kommentar abgeben. Axios hat eine Post Methode, um damit umzugehen POST Anforderungen, wobei das zweite Argument die Daten sind, die in dieser Anforderung gesendet werden sollen. Fügen Sie die Anforderung dem Thunk hinzu und übergeben Sie Daten im Fall einer Schlange, um den Erwartungen des Servers zu entsprechen.

return axios .post( 'http://localhost:3001/comments', { user_id: user.id, photo_id: currentPhotoId, comment, left, top })

19. Behandeln Sie Erfolg und Fehler

Wenn das Versprechen von axios aufgelöst oder abgelehnt wird, müssen wir den Antrag darüber informieren. Wenn es erfolgreich aufgelöst wird, gibt der Server den Inhalt des Kommentars zurück. Wir sollten das mit der Erfolgsaktion weitergeben. Wenn es abgelehnt wird, lösen Sie eine Fehleraktion aus. Aktualisieren Sie das Versprechen mit dann und Fang Blöcke.

.then(({ data: { id, comment, left, top } }) => dispatch( submitCommentSuccess( id, comment, left, top, user, currentPhotoId) ) ) .catch(() => dispatch( submitCommentError()));

20. Kommentar zum Foto hinzufügen

Erste Schritte mit Redux Thunk: Kommentar zum Foto hinzufügen

Bearbeiten Sie den Fotoreduzierer so, dass Kommentare sofort angezeigt werden

Sobald der Kommentar erfolgreich hinzugefügt wurde, wird er vom Bildschirm gelöscht, ist jedoch erst sichtbar, wenn die Seite aktualisiert wird. Wir können den Fotoreduzierer aktualisieren, um den neuen Kommentar aufzunehmen und ihn zu seinem Kommentararray hinzuzufügen, damit er wie die anderen angezeigt wird. Öffnen Sie reducer / photos / photos.js und fügen Sie einen Fall hinzu, um die Aktion auszuführen. Erstellen Sie eine Kopie des Status, um sicherzustellen, dass der vorhandene Status nicht versehentlich geändert wird.

case SUBMIT_COMMENT_SUCCESS: const { id, comment, top, left, user, photoId } = action.payload; const newState = JSON.parse( JSON.stringify(state)); const photo = newState.find( photo => photo.id === photoId); photo.comments.push({ id, comment, left, top, user }); return newState;

21. Andere Kommentare ausblenden

Wenn ein anderer Kommentar geöffnet 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 verfasst wird. Wir können uns in das Bestehende einhaken ADD_NEW_COMMENT Aktion, um die zu löschen commentOpen Wert. Gehe zu Reduzierer / ui / ui.js. und fügen Sie einen Fall dafür hinzu.

case ADD_NEW_COMMENT: return { ...state, commentOpen: undefined };

Dieser Artikel wurde ursprünglich in Ausgabe 283 des Creative Web Design Magazins veröffentlicht Webdesigner . Ausgabe 283 hier kaufen oder Abonnieren Sie hier den Web Designer .

Zum Thema passende Artikel: