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效果的任何示例。

任何人都可以看到我做错了什么，或者有更好/正确的方法来做到这一点吗？

提前致谢。

Answer 1

我们假设，为了这个用例，您有两个操作fetchUser和fetchStyle。您希望在第一个操作 成功后立即触发第二个操作。

在这种情况下，您需要为每个操作执行两个其他操作来处理成功和错误，以便您的操作如下：

对于用户提取：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));
  }
}

提示：您必须使用call中的redux-saga效果。

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

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

/*
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链接异步操作

1 个答案: