使用 redux-sagas 链接异步操作

Question

我有一个名为 initialiseApp 的操作，它显然会初始化应用程序。我需要从服务器获得一些东西，例如用户信息、样式和正在显示的页面的一些详细信息（这是一个单页应用程序）。我正在使用 redux-sagas，但我想不出一种方法来链接异步操作，以便它们按顺序发生，而不是并行发生。

我需要在请求任何样式信息之前调用用户信息，因为在服务器端，对用户的调用去检索用户并在会话中设置一些东西。由于目前正在并行请求样式，因此显示错误，因为尚未在服务器上设置用户。

所以我尝试使用 put.sync，但这似乎不起作用，但这是我目前的代码（顺便说一句，我也在使用 TypeScript）：

private *invokeAndWaitOn(action: IAction<any>) {
    const putSync = (put as any).sync; // The typings file for redux-sagas does not yet include put.sync
    yield putSync(action);      
}

private *invokeArrayOfActions(actions: IAction<any>[]) {
    for (let action of actions) {
        yield* this.invokeAndWaitOn(action);
    }
}

但这似乎不起作用，我找不到任何示例来说明如何正确使用 redux-saga 的 put.sync 效果。

谁能看出我做错了什么，或者有 better/correct 方法可以做到这一点吗？

提前致谢。

Answer 1

让我们假设，为了这个用例，您有两个操作 fetchUser 和 fetchStyle。您想要在 第一个操作 成功.

之后立即触发 第二个操作

在这种情况下，您需要有两个其他操作来分别处理 Success 和 Error，以便您的操作如下：

对于用户获取：fetchUser、fetchUserSuccess和fetchUserError

对于样式抓取：fetchStyle、fetchStyleSuccess和fetchStyleError

然后将整个获取过程包装起来，假设 sagaFunction 如下：

private* fetchUserSaga() {
  try {
    yield put(fetchUser());
    let response = yield call(/* fetchUser API function */])
    yield put(fetchUserSuccess(response));
  } catch (err) {
    yield put(fetchUserFailure(err));
  }
}

提示：你必须使用来自redux-saga的call效果。

private* fetchStyleSaga() {
  try {
    yield put(fetchStyle());
    let response = yield call(/* fetchStyle API function */])
    yield put(fetchStyleSuccess(response));
  } catch (err) {
    yield put(fetchStyleFailure(err));
  }
}

然后将这些 sagas 函数传递给调用程序生成器函数，如下所示：

/*
const sagas = [
  fetchUserSaga,
  fetchStyleSaga,
]; */

private* invokeArrayOfSagas(sagas: ISaga<any>[]) {
  for (let saga of sagas) {
    yield call(saga()); /* saga: fetchUserSaga || fetchStyleSaga */
  }
}

这将等到 fetchUserSaga 完成然后开始 fetchStyleSaga.

更多信息：如果你想将一些动作分组并并行调用它们，另一组动作依赖于它们，你可以将它们放在一个数组中，其中一个 yield关键字，多看here.

使用 redux-sagas 链接异步操作

Chaining asynchronous actions using redux-sagas

asynchronous

redux

redux-saga

yield-keyword