2016-07-12 2 views
5

È possibile restituire promessa/segnale dal creatore dell'azione, risolto quando Redux thunk ha inviato correttamente determinate azioni?Redux thunk: ritorno promessa dall'azione inviata

considerare questo creatore azione:

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}) 
      }); 
    } 
} 

voglio chiamare una qualche funzione in modo asincrono nel componente dopo aver chiamato doPost azione creatore quando Redux ha o spediti POST_SUCCESS o azioni POST_ERROR. Una soluzione sarebbe quella di passare il callback allo stesso creatore di azioni, ma ciò renderebbe il codice disordinato e difficile da comprendere e mantenere. Potrei anche eseguire il polling dello stato di Redux nel ciclo while, ma ciò sarebbe inefficiente.

Idealmente, la soluzione sarebbe una promessa, che dovrebbe risolvere/rifiutare quando determinate azioni (in questo caso POST_SUCCESS o POST_ERROR) vengono inviate.

handlerFunction { 
    doPost(data) 
    closeWindow() 
} 

L'esempio sopra dovrebbe essere riorganizzata, così CloseWindow() viene chiamato solo quando doPost() ha esito positivo.

risposta

7

Certo, si può tornare promessa azione asincrona:

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) 
      }); 
    } 
} 

Ora, dispatch funzione restituisce una promessa:

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. 
     }); 
} 
+0

Posso assicurare che poi dentro creatore azione viene chiamato prima di allora dentro handlerFunction ? –

+2

Sì. Il codice all'interno di 'handlerFunction' sarà sempre invocato dopo il codice' dispatch'. – 1ven

+0

Inoltre, per qualche ragione di esempio restituisce l'oggetto Azione inviato all'interno di allora e non la risposta –

Problemi correlati