Redux Saga：根 saga 中的 yield 数组与 fork 之间的区别

Question

saga 新手，我在我的根 saga 中使用它：

function* rootSaga() {
    yield [
        cycleRoot(), // fetches root
        cycleChain(), // fetch chain
        cycleChatBadge(), // fetches badge
        watchNotifications(), // navigate on ROOT_DONE
        watchNavigation(), // listen to navigation changes
        watchAppState(), // background/foreground
        watchConnection(), // connection chages
    ];
}

它有效。但是，我已经看到使用以下示例的示例：

function* rootSaga() {
    yield fork (cycleRoot);
    yield fork (cycleChain);
    ...
}

点燃根传奇时这两者有什么区别？

Answer 1

这里实际上有两个不同。

1.使用效果与直接调用 sagas。

redux-saga 库可以直接处理产生生成器，但是这种方法使得在编写测试时很难使用模拟。相反，您可以使用call 效果。这段代码的工作方式与您的第一个 sn-p 完全相同，只是它是使用 call 效果以声明方式编写的。 （另外，我在这里使用all 效果，因为不推荐使用产生数组）。

function* rootSaga() {
    yield all([
        call(cycleRoot), 
        call(cycleChain),
        ...
    ]);
}

要获得更深入的见解（包括测试示例），我建议阅读 redux-saga 文档的这一部分：https://redux-saga.js.org/docs/basics/DeclarativeEffects.html

您可以使用 call 效果来调用函数和 sagas。但是，如果您对编写测试不感兴趣并且确定永远不会，我发现使用 call 效果来区分调用 saga（使用 call）和常规函数（直接调用）很有用。

2。使用fork 而不是call

第二个区别是，在你的第一个 sn-p 中，你会阻止 rootSaga 的执行，直到所有的 saga 都完成。要使它们不阻塞，您可以使用fork 效果。

function* rootSaga() {
    yield all([
        call(cycleRoot), 
        call(cycleChain),
        ...
    ]);
    console.log('This happens only after all sagas are finished (including fetching etc.')
}

function* rootSaga() {
    yield all([
        fork(cycleRoot), 
        fork(cycleChain),
        ...
    ]);
    console.log('This happens immediately after the sagas are executed - it does not wait for async action like fetching')
}

您可以再次阅读文档中的非阻塞调用：https://redux-saga.js.org/docs/advanced/NonBlockingCalls.html

结论我建议在调用其他 saga 时始终使用效果（如 call/fork）并使用 fork 效果在根 saga 中启动其他 saga，除非有阻止它的好理由。