Redux-Saga如何获取第一个接口返回ID并传递给第二个saga使用

你可以通过以下两种常用方式实现第一个接口返回ID传递给第二个接口的逻辑：

方案1：监听第一个接口数据存入Store的Action触发第二个Saga（完全解耦） #

不需要修改原有两个业务Saga的核心逻辑，只需要新增对第一个数据存储Action的监听，自动触发第二个接口请求：

需要修改的代码点 #

1. 调整getUserDetail Action 支持传参

// 第二个Saga的Action定义部分修改
export const getUserDetail = (userId) => {
  return { type: GET_USER_DETAIL, userId };
};

2. 补全watcherSaga逻辑，新增对SET_USER_DATA的监听

import {takeLatest} from "redux-saga/effects";
import { GET_USER_DATA, SET_USER_DATA } from "../reducers/getUser.reducer";
import { GET_USER_DETAIL } from "../reducers/getDetail.reducer";
import { getUserHandler } from "./handler/getUserHandler";
import { getDetailsHandler } from "./handler/getDetailsHandler";
import { getUserDetail } from "../reducers/getDetail.reducer";

export function* watcherSaga() {
  yield takeLatest(GET_USER_DATA, getUserHandler);
  yield takeLatest(GET_USER_DETAIL, getDetailsHandler);
  // 新增：监听第一个用户数据写入成功的Action，自动触发详情请求
  yield takeLatest(SET_USER_DATA, function*(action) {
    // 从第一个Action返回的用户数据中取到ID，传入第二个请求
    yield put(getUserDetail(action.userData.id));
  });
}

3. 修改第二个Saga的Handler接收参数并传递给接口

export function* getDetailsHandler (action) {
  try {
    // 接收Action传递的用户ID
    const userId = action.userId;
    // 将ID作为参数传给详情接口请求
    const response = yield call(getDetailRequest, userId);
    const { data } = response;
    yield put(setUserDetail(data));
  } catch (error) {
    console.log(error);
  }
}

方案2：第一个Saga执行完成后直接触发第二个Saga #

如果两个接口的强关联逻辑固定，可以直接在第一个请求的Handler里调用第二个请求：

修改第一个Saga的Handler即可 #

export function* getUserHandler(action) {
  try {
    const response = yield call(getUserRequest);
    const { data } = response;
    yield put(setUser(data));
    // 新增：拿到ID后直接触发第二个请求
    const detailResponse = yield call(getDetailRequest, data.id);
    yield put(setUserDetail(detailResponse.data));
  } catch (error) {
    console.log(error);
  }
}

这种写法逻辑更集中，适合两个接口绑定调用的场景。

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