Redux Saga中action返回undefined问题排查及数据传递咨询

首先，咱们先拆解下你的代码逻辑：你的action创建函数syncFirebaseToStore已经正确把传入的data挂载到action对象的data属性上了，saga的takeLatest也会自动把触发的action作为参数传给fetchInitialData这个worker saga。那为什么这里的action会是undefined呢？大概率是触发action的方式出了问题，咱们一步步排查：

1. 检查你dispatch action的方式 #

你必须确保调用dispatch时，传入的是syncFirebaseToStore(data)的返回值，而不是直接手写action对象或者忘记传参：

错误示例： #

// 错误1：直接写action对象，没有携带data，且saga接收的action结构不符合预期
dispatch({ type: 'SYNC_FIREBASE_TO_STORE' })

// 错误2：调用action创建函数时没传data，导致action.data是undefined（不过action本身不会是undefined）
dispatch(syncFirebaseToStore())

正确示例： #

// 先准备好需要同步的数据
const targetData = { /* 你的数据内容，比如从前端或其他地方获取的内容 */ };
// 调用action创建函数并传入数据，再dispatch
dispatch(syncFirebaseToStore(targetData));

2. 确认saga的配置是否正确 #

虽然你给出的mySaga代码看起来没问题，但要确保它被正确集成到redux-saga的配置中：

• 比如在rootSaga里包含mySaga：

export default function* rootSaga() {
  yield all([
    mySaga(),
    // 其他你的saga任务
  ]);
}

• 并且在store初始化的时候，通过redux-saga的middleware.run(rootSaga)来启动saga任务。

3. 验证action是否正确生成 #

如果上面两步都没问题，你可以在dispatch前先打印action，确认它的结构是否正确：

const testAction = syncFirebaseToStore(targetData);
console.log(testAction); // 应该输出 { type: 'SYNC_FIREBASE_TO_STORE', data: targetData }
dispatch(testAction);

这样操作后，fetchInitialData里的action就应该能拿到正确的对象，你也可以通过action.data获取到传入的数据了。

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