如何导出并组合Redux Saga？多文件拆分Sagas问询

你的代码目前存在一个小问题：在rootSaga里使用yield all([analyticsSagas])时，analyticsSagas本身已经是一个数组（包含logEvent这个saga），这样就会形成嵌套数组[[logEvent]]，而all方法需要接收的是扁平的saga生成器集合，所以无法正确执行这些sagas。

下面提供两种可行的修复方案：

方案一：展开子saga数组 #

保持analytics.js的导出不变，在rootSaga里使用展开运算符...把analyticsSagas数组展开，让all能直接拿到单个的saga生成器：

修改后的index.js代码： #

import { analyticsSagas } from 'analytics' 
const rootSaga = function* rootSaga() { 
  // 使用展开运算符把数组里的saga逐个传入all
  yield all([ ...analyticsSagas, ]) 
}

方案二：导出子saga的根生成器函数 #

另一种更符合Redux Saga最佳实践的方式是，在analytics.js里导出一个单独的根saga函数，而不是数组，这样组合起来更清晰：

修改后的analytics.js代码： #

const logEvent = function* logEvent() { 
  while (true) { 
    const action = yield take(action_type.LOG_EVENT) 
    let params = { ...action.payload.eventParams, } 
    firebaseAnalytics.logEvent( 
      action.payload.eventName, 
      params 
    ) 
  } 
} 

// 导出一个根saga函数，内部用all组合当前文件的所有sagas
export function* analyticsRootSaga() {
  yield all([
    logEvent()
  ])
}

修改后的index.js代码： #

import { analyticsRootSaga } from 'analytics' 
const rootSaga = function* rootSaga() { 
  yield all([ 
    analyticsRootSaga(),
    // 这里可以继续添加其他模块的根saga
  ]) 
}

这种方式的优势在于，每个模块的saga逻辑都封装在自己的根saga里，后续如果该模块新增其他sagas，只需要在analyticsRootSaga里添加即可，主文件的rootSaga不需要修改，扩展性更好。

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