渲染顺序中的 Thunk

Question

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

Answer 1

Action creator 是按顺序调度动作的合适位置。文档 covers this:

Using an async middleware like Redux Thunk certainly enables scenarios such as dispatching multiple distinct but related actions in a row, dispatching actions to represent progression of an AJAX request, dispatching actions conditionally based on state, or even dispatching an action and checking the updated state immediately afterwards.

如果用户信息和版本动作需要单独测试（他们应该位于不同的模块）或单独使用，可以合并动作创建者。这需要 return 承诺链接它们。这也显示了 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 - 可能是基于它的自定义中间件，并且能够处理拒绝。

渲染顺序中的 Thunk

Thunks in sequence on render

javascript

promise

reactjs

redux

redux-thunk