Redux-Thunk: Rückgabeversprechen von zugeordneter Aktion

Question

Ist es möglich, Versprechen/Signal vom Aktionsersteller zurückzugeben, behoben, wenn Redux thunk erfolgreich bestimmte Aktion ausgelöst hat?

diese Aktion Schöpfer Bedenken Sie:

function doPost(data) { 
    return (dispatch) => { 
     dispatch({type: POST_LOADING}); 
     Source.doPost() // async http operation 
      .then(response => { 
       dispatch({type: POST_SUCCESS, payload: response}) 
      }) 
      .catch(errorMessage => { 
       dispatch({type: POST_ERROR, payload: errorMessage}) 
      }); 
    } 
} 

I nach dem Aufruf doPost Aktion Schöpfer eine Funktion asynchron in der Komponente aufgerufen werden soll, wenn Redux hat entweder versandt POST_SUCCESS oder POST_ERROR Aktionen. Eine Lösung wäre, den Rückruf an den Aktionsersteller selbst zu übergeben, aber das würde Code unordentlich und schwer zu erfassen und zu pflegen machen. Ich könnte auch den Redux-Zustand in while-Schleife abfragen, aber das wäre ineffizient.

Im Idealfall wäre die Lösung eine Verheißung, die behoben/abgelehnt werden sollte, wenn bestimmte Aktionen (in diesem Fall POST_SUCCESS oder POST_ERROR) ausgelöst werden.

handlerFunction { 
    doPost(data) 
    closeWindow() 
} 

Das obige Beispiel sollte Refactoring so Close() nur aufgerufen wird, wenn doPost() erfolgreich ist.

Answer 1

Sicher, können Sie Versprechen von Asynchron-Aktion zurück:

function doPost(data) { 
    return (dispatch) => { 
     dispatch({type: POST_LOADING}); 
     // Returning promise. 
     return Source.doPost() // async http operation 
      .then(response => { 
       dispatch({type: POST_SUCCESS, payload: response}) 
       // Returning response, to be able to handle it after dispatching async action. 
       return response; 
      }) 
      .catch(errorMessage => { 
       dispatch({type: POST_ERROR, payload: errorMessage}) 
       // Throwing an error, to be able handle errors later, in component. 
       throw new Error(errorMessage) 
      }); 
    } 
} 

Nun wird dispatch Funktion ein Versprechen der Rückkehr:

handlerFunction { 
    dispatch(doPost(data)) 
     // Now, we have access to `response` object, which we returned from promise in `doPost` action. 
     .then(response => { 
      // This function will be called when async action was succeeded. 
      closeWindow(); 
     }) 
     .catch(() => { 
      // This function will be called when async action was failed. 
     }); 
}