Rückkehr Versprechen von Speicher nach redux thunk Versand

Question

// FÜR CLARITY EDITED

ich Kette Depeschen mit redux versuche thunk

function simple_action(){ 
    return {type: "SIMPLE_ACTION"} 
} 

export function async_action(){ 
    return function(dispatch, getState){ 
    return dispatch(simple_action).then(()=>{...}); 
    } 
} 

Wie erhalte ich den Versand ein Versprechen aus dem Geschäft zurück?

// KONKRET

Ich bin wahrscheinlich einfach nicht etwas hier zu verstehen, sondern in allen Beispielen mit Thunk-redux, rufen sie ein separates Asynchron-Ereignis (wie holen), die offensichtlich ein Versprechen zurück. Was ich speziell suche ist, wenn ich eine Aktion an den Laden verschicke, wie stelle ich sicher, dass der Laden diese Aktion vollständig verarbeitet hat, bevor irgendetwas anderes in der Funktion action_creator() oben passiert.

Idealerweise möchte ich, dass der Laden eine Art Versprechen abgibt, aber ich verstehe nicht, wie oder wo das passiert?

Answer 1

Hier finden Sie ein Beispiel, wie asynchrone Aktionen gesendet und verkettet werden können. Die thunk Middleware weiß, wie man thunk async Aktionen in Aktionen umwandelt, also muss man einfach die simple_action() ein Thunk sein und die Thunk Middleware erledigt die Arbeit für Sie, wenn die Middleware eine normale Aktion sieht Er sendet diese Aktion als normale Aktion, aber wenn es sich um eine asynchrone Funktion handelt, wird Ihre asynchrone Aktion in normale Aktion umgewandelt.

So Ihre simple_action brauchen ein Thunk zu sein (A Thunk ist eine Funktion, die eine Funktion zurückgibt.) Wie dies zum Beispiel:

function makeASandwichWithSecretSauce(forPerson) { 
    return function (dispatch) { 
    return fetchSecretSauce().then(
     sauce => dispatch(makeASandwich(forPerson, sauce)), 
     error => dispatch(apologize('The Sandwich Shop', forPerson, error)) 
    ); 
    }; 
} 

Wenn die makeASandwichWithSecretSauce Funktion verwenden Sie die Sendefunktion

verwenden können

store.dispatch(
    makeASandwichWithSecretSauce('Me') 
); 

Und selbst

// It even takes care to return the thunk’s return value 
// from the dispatch, so I can chain Promises as long as I return them. 

store.dispatch(
    makeASandwichWithSecretSauce('My wife') 
).then(() => { 
    console.log('Done!'); 
}); 

das komplette Beispiel dafür, wie Sie können Aktionsentwickler schreiben, die Aktionen und asynchrone Aktionen von anderen Aktions-Erstellern verteilen und Ihren Kontrollfluss mit Promises aufbauen.

function makeSandwichesForEverybody() { 
    return function (dispatch, getState) { 
    if (!getState().sandwiches.isShopOpen) { 
     // You don’t have to return Promises, but it’s a handy convention 
     // so the caller can always call .then() on async dispatch result. 
     return Promise.resolve(); 
    } 

    //Do this action before starting the next one below 
    dispatch(simple_action()); 

    // We can dispatch both plain object actions and other thunks, 
    // which lets us compose the asynchronous actions in a single flow. 
    return dispatch(
     makeASandwichWithSecretSauce('My Grandma') 
    ).then(() => 
     Promise.all([ 
     dispatch(makeASandwichWithSecretSauce('Me')), 
     dispatch(makeASandwichWithSecretSauce('My wife')) 
     ]) 
    ).then(() => 
     dispatch(makeASandwichWithSecretSauce('Our kids')) 
    ).then(() => 
     dispatch(getState().myMoney > 42 ? 
     withdrawMoney(42) : 
     apologize('Me', 'The Sandwich Shop') 
    ) 
    ); 
    }; 
} 
//apologize and withdrawMoney are simple action like this for example 
     return { 
     type: "END_SUCESS" 
     } 

// Verwendung

store.dispatch(
    makeSandwichesForEverybody() 
).then(() => 
    console.log("Done !"); 
); 

So erstellen Sie eigene Versprechen Sie eine Bibliothek wie drossel verwenden können.

// EDIT: Um sicher zu sein, dass der Speicher diese Aktion vollständig verarbeitet hat, bevor irgendetwas anderes in der Funktion action_creator() passiert, können Sie diese simple_action vor action_creator(); // Ich habe diesen Kommentar zum Code hinzugefügt //Do this action before starting the next one below

Answer 2

dispatch gibt zurück, was auch immer die Aktion/Funktion, die es ruft, zurückgibt; Wenn Sie also bestimmte Aktivitäten verketten möchten (wie in Ihrem Beispiel), müsste Ihre Aktion eine Promise zurückgeben.

Wie @Aaleks erwähnt, wenn Ihre Aktion eine thunk war, können Sie ein Szenario erstellen, in dem Sie eine Promise zurückgeben, dann könnten Sie tun, was Sie erwähnen.

BTW ich denke, benennen Sie thunkaction_creator ein wenig irreführend ist, als simple_action eigentlich ein Action-Schöpfer in Redux parlance ist - wurden entsprechend bearbeitet :)