Redux-Saga如何监听多个action全部成功后才执行一次指定任务

takeEvery不支持传入多个Action并等待所有Action触发后才执行回调，你可以用Redux Saga内置的take + all Effect组合实现该需求，具体方案如下：

基础实现（每监听到一轮两个Action都触发就执行一次fetchData） #

import { take, all, call } from 'redux-saga/effects'

export default function* watch() {
  // 外层while循环支持重复监听多轮Action配对
  while (true) {
    // 等待getProducts和getUser两个Action都被触发
    yield all([
      take(getProducts),
      take(getUser)
    ])
    // 两个Action都触发完成后执行fetchData
    yield call(fetchData)
  }
}

实现说明 #

• take是阻塞型Effect，会暂停Saga执行，直到监听的对应Action被dispatch才会继续执行
• all会等待内部所有Effect都执行完成后才会返回，因此只有getProducts和getUser两个Action都触发后，才会继续执行后续的fetchData调用
• 如果你仅需要全局触发一次fetchData，直接去掉外层的while(true)循环即可

进阶用法（获取两个Action的Payload传入fetchData） #

如果你需要把两个Action携带的参数传给fetchData，可以按以下写法调整：

export default function* watch() {
  while (true) {
    // 按顺序接收两个Action的返回值
    const [productsAction, userAction] = yield all([
      take(getProducts),
      take(getUser)
    ])
    // 把两个Action的Payload作为参数传入fetchData
    yield call(fetchData, productsAction.payload, userAction.payload)
  }
}

注意：如果你需要等待的是两个异步请求Action执行成功后再触发fetchData，需要把take监听的Action类型替换为两个请求对应的成功回调Action（例如getProductsSuccess、getUserSuccess），避免请求刚发起还没成功就触发回调。

内容的提问来源于stack exchange，提问作者Imp3ll