如何在Redux Saga中处理调用不同函数的多个动作？

我来帮你拆解这段Redux-Saga代码的执行逻辑哈👇

首先贴出完整代码片段：

function* a() { yield takeEvery(action.LOGIN_SUCCESS, b) }
function* b() { yield takeEvery(action.FETCH_SUCCESS, c) }
function* c() { yield console.log('action from function a') }
function* d() { yield takeEvery(action.FETCH_SUCCESS, e) }
function* e() { yield console.log('action from function d') }
yield all([ fork(a), fork(d), ])

接下来一步步梳理整个流程：

• 初始化启动阶段：
  执行yield all([fork(a), fork(d)])时，会同时创建两个独立的非阻塞saga任务（fork不会阻塞后续流程），也就是说函数a和函数d会并行启动、各自独立运行，互相不会干扰。

• 当LOGIN_SUCCESS动作触发时：

  • 函数a里的takeEvery(action.LOGIN_SUCCESS, b)会立刻触发执行函数b
  • 函数b启动后，会通过takeEvery(action.FETCH_SUCCESS, c)开始监听FETCH_SUCCESS动作，从此只要这个动作触发，就会执行函数c，打印出action from function a

• 与此同时，函数d的状态：
  函数d从启动的那一刻起，就一直在通过takeEvery(action.FETCH_SUCCESS, e)监听FETCH_SUCCESS动作——不管LOGIN_SUCCESS有没有触发，它都处于活跃监听状态，不会因为其他任务的状态而暂停。

• 关键触发点：FETCH_SUCCESS动作触发时
  此时会同时触发两个监听逻辑：

  • 函数b启动的监听会执行c，打印action from function a
  • 函数d的监听会执行e，打印action from function d
    两个打印操作会并行执行，没有固定的先后顺序。

内容的提问来源于stack exchange，提问作者L. Pier Roberto