javascript - 在渲染时按顺序排列

我有一个可在渲染中获取一些用户信息的应用程序。因此，当应用程序首次启动时，它会使用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()操作中？
它看起来似乎并不干净，但我不知道该如何以不同的方式处理它。

最佳答案

Action 创建者是按顺序分派(dispatch) Action 的适当位置。文档covers this:



如果需要分别测试用户信息和版本操作(它们应位于不同的模块中)或分别使用，则可以将操作创建者组合在一起。这需要返回 promise 以将它们链接起来。这也显示了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()是否存在错误，替代方案甚至更糟。

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