Wie verwalten Sie asynchrone Store-Vorgänge mit Flux?

Question

In der Facebook-Talk auf der Flux-Architektur erwähnt Jing at 12:17, dass der Dispatcher erzwingt, dass keine Aktionen ausgelöst werden können, bis die aktuelle Aktion vollständig von den Speichern verarbeitet wird.

Der Dispatcher ist hier das Hauptstück, das erzwingt, dass es keine Kaskadierungseffekte ist; Sobald eine Aktion in den Laden geht, können Sie keine weitere hinzufügen, bis die Geschäfte vollständig fertig sind.

Meine Frage ist dann, wie zu können, soll mit langer Laufzeit asynchrone Operationen beschäftigen, die aus dem Speicher (zB eine Ajax-Anfrage, oder den Umgang mit einem anderen außerhalb async API) -anything blockiert werden könnten gekickt Der Abschluss der Aktionssendung (z. B. Warten auf das Lösen einer Zusage mit dem Ergebnis einer Ajax-Anforderung) kann UI-generierte Aktionen des Benutzers blockieren.

Answer 1

In meinem Verständnis sollten asynchrone Aktionen, die auf Ajax usw. beruhen, die Aktion nicht daran hindern, an alle Abonnenten gesendet zu werden.

Sie werden eine separate Aktion für den Benutzer Wirkung haben, wie TODO_UPDATE_TEXT im TodoMVC Beispiel und eine, die aufgerufen wird, wenn der Server zurückgibt, so etwas wie TODO_UPDATE_TEXT_COMPLETED (oder vielleicht auch nur etwas mehr Generika wie TODO_UPDATE_COMPLETED, die eine neue Kopie enthält von die neuesten Attribute).

In Fällen, in denen Sie optimistische Aktualisierungen vornehmen möchten, um dem Benutzer die Auswirkungen ihrer Änderung sofort anzuzeigen, können Sie den Speicher als Antwort auf die Benutzeraktion sofort aktualisieren (und dann noch einmal, wenn der Server die autorisierenden Daten zurückgibt). . Wenn Sie auf dem Server warten möchten, können Sie den Speicher nur als Reaktion auf die vom Server ausgelösten Aktionen aktualisieren.

Answer 2

Sehen Sie die Implementierung von dem, was Sophie in this fluxxor example von Umgang mit asynchronen Daten erklärt. Ein negativer Punkt ist, dass nach diesem Ansatz jede Benutzerinteraktion drei Aktionen benötigt (Auslöser, Erfolg und Fehler), aber möglicherweise nicht alle Benutzerinteraktionen diesen optimistischen Ansatz erfordern.

Der wichtige Teil der Aktion ist:

loadBuzz: function() { 
    this.dispatch(constants.LOAD_BUZZ); 

    BuzzwordClient.load(function(words) { 
    this.dispatch(constants.LOAD_BUZZ_SUCCESS, {words: words}); 
    }.bind(this), function(error) { 
    this.dispatch(constants.LOAD_BUZZ_FAIL, {error: error}); 
    }.bind(this)); 
    }, 

BinaryMuse (fluxxor Konzept) löst die LOAD_BUZZ Aktion und löst dann die asynchrone Anforderung mit dem Erfolg und Funktionen fehlschlagen, wo die Versendungen den Erfolg oder der Aktion fehlschlagen. Die Filialen können die LOAD_BUZZ-Aktion für ein optimistisches Update abhören oder ein SVG-Ladesymbol anzeigen und dann die Erfolgs- und Fehleraktionen für eine endgültige Erfolgs- oder Fehlerbenachrichtigung abhören (und das BUZZWORD im Geschäft speichern).

onLoadBuzz: function() { 
    this.loading = true; 
    this.emit("change"); 
}, 

onLoadBuzzSuccess: function(payload) { 
    this.loading = false; 
    this.error = null; 

    this.words = payload.words.reduce(function(acc, word) { 
    var clientId = _.uniqueId(); 
    acc[clientId] = {id: clientId, word: word, status: "OK"}; 
    return acc; 
    }, {}); 
    this.emit("change"); 
}, 

ich wie Sophie denken, dass AJAX-Anfragen sollte die Aktion nicht blockieren geschickt wird, weil dies wie eine synchrone Anforderung an den Server mehr sein würde und die Ansprechempfindlichkeit der Seite betroffen sein würde.