使用redux-saga作为中间件时，如何在函数内分发多个Action？

看起来你遇到的核心问题有两个：一是多个子Saga没有被完整注册到Redux Store中，二是当前仅触发了FETCH_PRODUCTS这一个Action，其他Saga对应的触发Action没有被分发。另外，你现在的代码中每个Saga都单独调用一次API，其实可以优化成一次请求获取所有数据后再分发多个Action，这样更高效。

下面分步骤给出解决方案：

第一步：创建根Saga并合并所有子Saga #

你目前的productsSaga和ctaSaga是独立的，但Redux需要一个根Saga来统一管理所有子Saga，否则未注册的Saga无法监听对应的Action。

创建rootSaga.js文件：

import { all } from 'redux-saga/effects';
import { productsSaga } from './ProductsSaga';
import { ctaSaga } from './ctaSaga';
// 后续如果有about相关的Saga，也要在这里导入

export default function* rootSaga() {
  yield all([
    ...productsSaga,
    ...ctaSaga,
    // ...aboutSaga（如果存在的话）
  ]);
}

然后在创建Store的文件（比如store.js）中注册根Saga：

import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from './reducer';
import rootSaga from './rootSaga';

const sagaMiddleware = createSagaMiddleware();

const store = createStore(
  rootReducer,
  applyMiddleware(sagaMiddleware)
);

sagaMiddleware.run(rootSaga);

export default store;

第二步：优化数据获取逻辑（推荐） #

现在每个子Saga都单独调用fetchAPIcall，会导致重复的API请求。可以改成一次请求获取所有数据，再分发多个Action到Reducer：

1. 先在actionType.js中新增一个统一触发的Action类型：

export const FETCH_ALL_DATA = 'FETCH_ALL_DATA';

2. 在action.js中新增对应的Action Creator：

export const fetchAllData = () => ({ type: FETCH_ALL_DATA });

3. 创建mainSaga.js统一处理数据获取：

import { call, put, takeLatest, fork } from 'redux-saga/effects';
import { fetchProducts, fetchCta, fetchAbout } from '../redux/action';
import { FETCH_ALL_DATA } from '../redux/actionType';
import { fetchAPIcall } from '../redux/api';

function* fetchAllData() {
  try {
    const { data } = yield call(fetchAPIcall);
    // 一次获取所有数据，分发多个Action更新状态
    yield put(fetchProducts(data.data.productCopy));
    yield put(fetchCta(data.data.cta));
    // 如果有about数据，也可以在这里分发对应的Action
    // yield put(fetchAbout(data.data.about));
  } catch (e) {
    console.error('数据获取失败:', e);
  }
}

export function* watcherFetchAllData() {
  yield takeLatest(FETCH_ALL_DATA, fetchAllData);
}

export const mainSaga = [fork(watcherFetchAllData)];

4. 更新rootSaga.js，将mainSaga加入：

import { all } from 'redux-saga/effects';
import { mainSaga } from './mainSaga';

export default function* rootSaga() {
  yield all([
    ...mainSaga,
  ]);
}

第三步：在Home组件中触发统一Action #

修改Home.js中的useEffect，只需要分发这个统一的Action即可：

// Home.js
import { fetchAllData } from './redux/action'; // 替换原来的fetchData

// ...其他代码

const dispatch = useDispatch();
useEffect(()=>{
  dispatch(fetchAllData());
},[])

如果你想保留单独触发的方式（不推荐） #

如果仍希望分别触发每个Action，需要在Home.js中分发多个触发Action，并确保每个子Saga都已注册到根Saga：

// Home.js
import { fetchData, fetchCtaTrigger } from './redux/action'; 
// 注意：需要在action.js中新增fetchCtaTrigger，返回{type: FETCH_CTA}

useEffect(()=>{
  dispatch(fetchData()); // 触发products的Saga
  dispatch(fetchCtaTrigger()); // 触发cta的Saga
  // 如果有about的触发Action，也在这里分发
},[])

最后检查Reducer #

你的Reducer逻辑是正确的，每个Action类型都对应了正确的状态更新，只要Action被正确分发，状态就会同步更新。

这样修改后，你就能一次性获取所有数据并分发多个Action，或者分别触发多个Action对应的Saga，所有状态都会被正确更新了。

内容的提问来源于stack exchange，提问作者M. R