跨组件复用Redux-Saga逻辑/函数的实现方案咨询

核心思路是将共性的请求、状态判断、action派发逻辑抽象为高阶Saga工厂函数，仅将业务差异点作为参数传入，即可批量生成不同场景的Saga实例。

步骤1：实现通用Saga工厂函数 #

function* createFetchSaga({ 
  apiFn, 
  successAction, 
  failureAction, 
  // 支持自定义返回值转换逻辑，默认适配你当前取res.data.results的场景
  transform = (res) => res.data.results 
}) {
  // 返回实际的saga处理函数，自动透传action的payload
  return function* (action) {
    try {
      const res = yield call(apiFn, action?.payload);
      const { status, data } = res;

      if (status === 200 && data) {
        const processedData = transform(res);
        yield put(successAction(processedData));
      }
    } catch (error) {
      yield put(failureAction(error?.message));
    }
  }
}

步骤2：生成业务Saga #

替换你之前手写的三个重复Saga，仅需要传入对应参数即可：

const fetchUpComingMovies = createFetchSaga({
  apiFn: getUpComingMovies,
  successAction: successGetUpComingMovies,
  failureAction: failureGetUpComingMovies
});

const fetchCurrentShows = createFetchSaga({
  apiFn: getOnTheAirShows,
  successAction: successGetCurrentShows,
  failureAction: failureGetCurrentShows
});

const fetchTopRated = createFetchSaga({
  apiFn: getTopRated,
  successAction: successGetTopRated,
  failureAction: failureGetTopRated
});

步骤3：保留原有rootSaga逻辑 #

你现有的rootSaga不需要做任何修改，所有监听逻辑完全兼容：

export default function* rootSaga() { 
  yield all([
    takeLatest(homeActionTypes.REQUEST_GET_UPCOMING_MOVIES, fetchUpComingMovies),
    takeLatest(homeActionTypes.REQUEST_GET_SHOWS, fetchCurrentShows),
    takeLatest(homeActionTypes.REQUEST_GET_TOP_RATED, fetchTopRated),
  ]);
}

扩展能力 #

如果后续遇到返回结构特殊的接口，可以自定义transform参数适配不同的数据处理逻辑，无需修改工厂函数核心逻辑：

// 示例：自定义返回值处理
const fetchSpecialList = createFetchSaga({
  apiFn: getSpecialList,
  successAction: successGetSpecialList,
  failureAction: failureGetSpecialList,
  transform: (res) => res.data.records.items
});

方案优势 #

• 完全消除重复模板代码，后续新增同类请求仅需3行配置即可完成
• 全局逻辑统一管控，后续如果要新增错误上报、状态码扩展、请求缓存等能力，仅需修改工厂函数一处
• 无侵入式改造，原有action、reducer、组件触发逻辑完全不需要调整

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