当前位置: 首页 > 面试题库 >

Redux重击:从已调度操作中返回承诺

於英朗
2023-03-14
问题内容

Redux thunk成功调度某些动作后,是否可以从动作创建者那里返回承诺/信号,并解决?

考虑以下动作创建者:

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

当Redux分派POST_SUCCESS或POST_ERROR操作时,我想在调用 doPost 操作创建者后 在组件中
异步调用某些函数。一种解决方案是将回调传递给动作创建者本身,但这会使代码混乱并且难以掌握和维护。我也可以在while循环中轮询Redux状态,但是那样效率很低。
__

理想情况下,解决方案是一个承诺,当调度某些操作(在这种情况下为POST_SUCCESS或POST_ERROR)时,它应该解决/拒绝。

handlerFunction {
  doPost(data)
  closeWindow()
}

上面的示例应该被重构,因此closeWindow()仅在doPost()成功时才被调用。


问题答案:

当然,您可以从异步操作中返回承诺:

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

现在,dispatch函数返回了一个承诺:

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中,当调度一个动作时,reducer将相应地更改状态,调用该动作的组件也可以访问该状态(由Provider通过props传递)。我对吗? 状态是访问组件中操作结果的唯一方法吗?(已调用操作的组件)。 如何将回调函数传递给操作,然后使用该方法将结果发送回组件? 问题答案: 在redux中,当调度一个动作时,reducer将相应地更改状态,调用该动作的组件也可以访问该状态(由P

  • 问题内容: 关于这两个重要来源:NZakas- 承诺链中的归还承诺 和MDN承诺,我想提出以下问题: 每次我们从承诺履行处理程序返回值时,该值如何传递给从同一处理程序返回的新承诺? 例如, 在这个例子中,是一个承诺。也是来自履行处理程序的承诺。但是。取而代之的是神奇地解决(如何?),然后将该值传递给的实现处理程序。即使是这里的句子也令人困惑。 您能给我解释一下这到底是怎么回事吗?我对这个概念感到困

  • 解决方案(更新): 我认为任何操作都会导致react-redux-link调用mapState函数,但是当一个操作没有改变任何事情时,情况就不是这样了。 我有一个localStorage模块,它分派操作,但不更改状态,而是写入localStorage。该模块具有容器中使用的选择器,但在状态实际更改之前不会调用这些选择器,因此只有在调度另一个更改状态的操作后,UI才会正确显示。 问题 当我把商店放在

  • 我有一个redux saga设置,工作正常。我的一个分派任务是创建一个新订单,然后一旦创建了订单,我就想用更新后的状态做一些事情。 由于 createOrder 操作触发调用 API 的重订传奇,因此存在延迟,因此在我的函数 do 之前不会更新此 .props.user 命令某些内容被调用。我可以设置一个超时,但这似乎不是一个可持续的想法。 我已经阅读了有关Stack Overflow的类似问题,

  • 我有一个自定义钩子,它返回一个动作。父组件“容器”使用自定义钩子并将动作作为道具传递给子组件。 从子组件执行操作时,实际分派发生两次。现在,如果子级直接使用钩子并调用操作,则调度只发生一次。 如何复制它: 打开下面的沙盒,打开chrome上的devool,这样你就可以看到我添加的控制台日志。 https://codesandbox.io/s/j299ww3lo5?fontsize=14 主要的js

  • 我在应用程序中使用了进行路由。在主页中,有一个表单。当用户填写表单并点击submit按钮时,操作将被调度(ShowResultToFar),并应重定向到结果页面,该页面不是主页中的子页面,而是一个从上到下具有不同UI的不同页面。 我试图这样做,但行动没有分派只有路由已经过渡,但显示相同的主页,而不是新页面(结果) index.js app.js form.js(它是横幅的子组件,是应用程序的子组件