Redux thunk：返回来自派遣操作的承诺 [英] Redux thunk: return promise from dispatched action

问题描述

考虑这个动作创建者：

$

$是否有可能返回来自动作创建者的promise / signal，在Redux thunk成功发送某个动作时解析？ b
$ b

 函数doPost（data）{
 return（dispatch）=> {
 dispatch（{type：POST_LOADING}）; 
 Source.doPost（）//异步http操作
 .then（response => {
 dispatch（{type：POST_SUCCESS，payload：response}）
}）
 .catch（errorMessage => {
 dispatch（{type：POST_ERROR，payload：errorMessage}）
}）; 
 
 
 $ / code> 

我想要异步地调用一些函数 in当Redux调度POST_SUCCESS或POST_ERROR操作时，调用 doPost 动作创建器之后，组件。一种解决方案是将回调传递给动作创建者本身，但这会使代码变得混乱，难以掌握和维护。我也可以在while循环中查询Redux状态，但效率不高。

理想情况下，解决方案将是一个承诺，当某些行为

  handlerFunction {
 doPost（data）
 closeWindow（）这个例子是POST_SUCCESS或POST_ERROR） 
 
 
 
 
 
 $ b 
上面的例子应该被重构，所以closeWindow（）只有在doPost （）是成功的。
解决方案
当然，您可以从异步操作返回承诺： 
 
 
 函数doPost（data）{
 return（dispatch）=> {
 dispatch（{type：POST_LOADING}）; 
 //回复诺言。 
 return Source.doPost（）//异步http操作
 .then（response => {
 dispatch（{type：POST_SUCCESS，payload：response}）
 //返回响应，以便能够在调度异步操作后处理它。
 return response; 
}）
 .catch（errorMessage => {
 dispatch（{type：POST_ERROR，payload ：errorMessage}）
 //抛出一个错误，以便稍后可以在组件中处理错误
 throw new Error（errorMessage）
}）; 
 
 
  
现在， dispatch  
 
 
  handlerFunction {
 dispatch（doPost（data））
 //现在，我们可以访问`response`对象，这是我们在`doPost`动作中从promise返回的。 
 .then（response => {
 //这个函数在异步操作成功时会被调用
 closeWindow（）; 
}）
 .catch（ （）=> {
 //当异步操作失败时，将调用此函数。
}）; 
} 
  
 
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 component 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.
解决方案
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 component.
                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.
      });
}


                        
这篇关于Redux thunk：返回来自派遣操作的承诺的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！