渲染时按顺序敲击答案

【问题标题】：Thunks in sequence on render渲染时按顺序敲击
【发布时间】：2019-04-23 17:39:24
【问题描述】：

我有一个应用程序可以在渲染时获取一些用户信息。因此，当应用程序首次启动时，它会使用 getUserInformation() 函数获取数据。用户无需手动登录，应用在公司内网中。

export function getUserInformation() {
  return function (dispatch) {
    getUser()
      .then((data) => {
        dispatch(
          {type: GET_USER_SUCCESS, response: data}
        )
      })
      .catch((error) => {
        dispatch(
          {type: GET_USER_FAILURE, response: error}
        )
      })
  }
}

现在我想获取应用程序的版本以在整个应用程序中可用。但是只有在用户登录后才能触发 API 调用（因此成功调用了 getUser()）。我应该添加

.then(getVersion())

在 getUserInformation() 操作中？它看起来并不干净，但我不知道如何以不同的方式处理它。

【问题讨论】：

好吧，如果getVersion 应该只在getUserInformation 之后运行，那么我看不到更好的选择。
[offtop] 不是.then(getVersion()) 而是.then(getVersion) 否则你会得到错误的排序并可能面临竞争条件

标签： javascript reactjs redux promise redux-thunk

【解决方案1】：

动作创建器是按顺序调度动作的合适位置。文档covers this：

使用像 Redux Thunk 这样的异步中间件当然可以实现这样的场景，例如连续调度多个不同但相关的动作，调度动作来表示 AJAX 请求的进展，根据状态有条件地调度动作，甚至调度一个动作并检查之后立即更新状态。

如果用户信息和版本动作需要单独测试（它们应该位于不同的模块中）或单独使用，可以组合动作创建者。这需要返回承诺以链接它们。这也说明了redux-thunk的局限性：

function getUserInformation() {
  return async (dispatch) => {
    try {
        dispatch(
          {type: GET_USER_SUCCESS, response: await getUser()}
        )
    } catch (error) {
        dispatch(
          {type: GET_USER_FAILURE, response: error}
        )
    }
  };
}

...

function getVersion() {
  return async (dispatch) => {...};
}

...

function getInitialData() {
  return async (dispatch, getState) => {
    await getUserInformation()(dispatch);
    // we need to use getState to check if there was an error
    // because getUserInformation returns a fulfilled promise any way
    await getVersion()(dispatch);
  };
}

从getUserInformation 重新抛出一个错误是有意义的，但如果它与getInitialData 分开使用会很糟糕，因为这会导致未处理的拒绝。另一种方法更糟糕，检查getState() 是否有错误。

这种情况需要比redux-thunk（dead simple）更复杂的中间件 - 可能是基于它并能够处理拒绝的自定义中间件。

【讨论】：