Kombinierte asynchrone Ergebnisse mit React und Redux

Question

Ich arbeite an meiner ersten React/Redux-App, und ich habe jetzt das erste nicht-triviale Problem erreicht.

App-Daten (ziemlich viele davon) werden beim Laden der Seite asynchron vom Server geladen, wobei ein Standardparameter verwendet wird. Es wird dann weiter auf der Client-Seite gefiltert. Sowohl der Parameter für die anfängliche Datenladung als auch die Filter können vom Benutzer geändert werden.

Ein Problem, das ich haben könnte, ist veraltete Daten von der ersten Daten laden zurückgegeben werden, sollte der Benutzer den Parameter wechseln, bevor es zurückgegeben wird. Ein anderer ist es, die Kette von Ereignissen in einer idiomatischen Redux-Manier zu verwalten.

Ich bin mir sicher, dass ich vorherige Rückrufe manuell abbrechen konnte, aber ich bin wirklich auf der Suche nach einem zwingenderen Ansatz.

Normalerweise würde ich diese Art von Problem mit RX lösen. Wäre das hier sinnvoll? In welchem ​​Fall, wo sollte mein RX-Code sitzen?

Vielen Dank für Ihre Anregungen

Answer 1

Ich entdeckte eine Bibliothek mit dem Namen Redux-Observable,, mit der Sie Redux-Ereignisse als Ereignisströme anzeigen und als Ergebnis komplexe asynchrone Vorgänge ausführen können. Es passt perfekt zur Rechnung.

This video habe mich angefangen

Answer 2

Die zuverlässigste Lösung so weit ist die Verwendung von redux-saga Bibliothek. Es kümmert sich um die Nebenwirkungen in einem expressiven, leicht zu testenden declarative way (keine rxjs-Lösung).

In Ihrer Situation ist notwendig, um die takeLatest() Wirkung zu verwenden, die das gehandhabt wird nur aktuelle Anforderung sicher macht:

import { takeLatest } from 'redux-saga/effects' 

function* watchFetchData() { 
    yield takeLatest('FETCH_REQUESTED', fetchData) 
} 

export function* fetchData(action) { 
    try { 
     const data = yield call(Api.fetchUser, action.payload.url) 
     yield put({type: "FETCH_SUCCEEDED", data}) 
    } catch (error) { 
     yield put({type: "FETCH_FAILED", error}) 
    } 
} 

'FETCH_REQUESTED' ist der Aktionstyp aus einer Aktion Schöpfer gesendet. takeLatest() stellt sicher, nur die letzte Aktion zu behandeln, und Sie erhalten das Ergebnis nur von der letzten Abrufanforderung.

Wenn Sie eine Abruf-Bibliothek wie Axios verwenden, können Sie force the cancellation von unnötigen AJAX-Anfragen.

Weitere Details über saga helpers.