javascript - Redux thunk: return promise from dispatched action - Stack Overflow

admin管理员组

文章数量:1386782

Is it possible to return promise/signal from action creator, resolved when Redux thunk has successfully dispatched certain action?

Consider this action creator:

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 want to call some function asynchronously in the ponent after calling doPost action creator when Redux has either dispatched POST_SUCCESS or POST_ERROR actions. One solution would be to pass the callback to action creator itself, but that would make code messy and hard to grasp and maintain. I could also poll the Redux state in while loop, but that would be inefficient.

Ideally, solution would be a promise, which should resolve/reject when certain actions (in this case POST_SUCCESS or POST_ERROR) gets dispatched.

handlerFunction {
  doPost(data)
  closeWindow()
}

The above example should be refactored, so closeWindow() gets called only when doPost() is successful.

Is it possible to return promise/signal from action creator, resolved when Redux thunk has successfully dispatched certain action?

Consider this action creator:

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 want to call some function asynchronously in the ponent after calling doPost action creator when Redux has either dispatched POST_SUCCESS or POST_ERROR actions. One solution would be to pass the callback to action creator itself, but that would make code messy and hard to grasp and maintain. I could also poll the Redux state in while loop, but that would be inefficient.

Ideally, solution would be a promise, which should resolve/reject when certain actions (in this case POST_SUCCESS or POST_ERROR) gets dispatched.

handlerFunction {
  doPost(data)
  closeWindow()
}

The above example should be refactored, so closeWindow() gets called only when doPost() is successful.

• javascript
• html
• reactjs
• redux
• redux-thunk

Share Improve this question Follow asked Jul 12, 2016 at 13:11 Tuomas ToivonenTuomas Toivonen 23.6k5252 gold badges145145 silver badges243243 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

Sure, you can return promise from async action:

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 ponent.
                throw new Error(errorMessage)
            });
    }
}

Now, dispatch function is returning a promise:

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

本文标签： javascriptRedux thunk return promise from dispatched actionStack Overflow