时间戳

首页 > 解决方案 > 渲染时按顺序敲击

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() 操作中？它看起来并不干净，但我不知道如何以不同的方式处理它。

标签： javascriptreactjsreduxpromiseredux-thunk

解决方案

动作创建者是按顺序调度动作的合适位置。该文档涵盖了这一点：

使用像 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这种情况需要一个比非常简单的中间件更复杂的中间件——可能是一个基于它并且能够处理拒绝的自定义中间件。

推荐阅读