Redux Saga监听器未接收/处理已派发Action问题排查

首先，根据你更新的信息——reducer能捕获FETCH_ITEMS_REQUEST，说明Action派发完全正常，问题确实出在你的watcher saga写法上。

核心错误：while(true) + takeLatest的错误搭配 #

你的watchLoadItemsRequest里写了：

while(true) {
  yield takeLatest('FETCH_ITEMS_REQUEST', fetchItems);
}

这是完全错误的用法！因为takeLatest本身就是一个持续监听并自动处理后续action的高阶effect，它内部已经封装了循环监听的逻辑。当你把它放在while(true)里时，第一次执行yield takeLatest(...)后，这个effect会一直阻塞当前saga的执行，永远不会进入下一次while循环，导致你的监听逻辑完全失效，自然不会触发fetchItems。

修正后的Watcher Saga代码 #

只需要去掉多余的while(true)循环即可：

import { all, fork, takeLatest } from 'redux-saga/effects'
import {fetchItems} from './itemsSaga';

function* watchLoadItemsRequest() {
  // takeLatest会持续监听FETCH_ITEMS_REQUEST，无需手动循环
  yield takeLatest('FETCH_ITEMS_REQUEST', fetchItems);
}

export default function* root() {
  yield all ([ fork(watchLoadItemsRequest) ])
}

额外细节修正（避免后续逻辑报错） #

顺便提一句，你的fetchItems里存在变量名不一致的问题：定义了let items : ItemEntity[];，但后续用了trades接收API返回值，最后put(fetchItemsCompleted(items))时items还是undefined，建议修正这个问题：

export function* fetchItems(action:any) {
  let items : ItemEntity[];
  yield put(httpCallStarted());
  // 统一变量名
  items = yield call(itemAPI.getAllItemsAsync)
  // 或者保留测试用的假数据
  items = [new ItemEntity(), new ItemEntity()]
  yield put(fetchItemsCompleted(items))
  yield put(httpCallCompleted());
}

如何验证Action是否发送到Redux？ #

除了你已经用的reducer监听方法，还有几个更直观的方式：

• 使用Redux DevTools：这是最方便的工具，能实时查看所有派发的Action、状态变化，甚至能追踪saga的执行流程。
• 在mapDispatchToProps里添加日志：

  const mapDispatchToProps = (dispatch: Dispatch) => {
    return {
      loadItems: () => {
        const action = {type:'FETCH_ITEMS_REQUEST'};
        console.log('Dispatching action:', action);
        dispatch(action);
      }
    }
  }
  

• 添加一个日志中间件到store：

  const loggerMiddleware = store => next => action => {
    console.log('Action dispatched:', action);
    return next(action);
  };
  
  const store = createStore(
    reducers,
    applyMiddleware(sagaMiddleware, loggerMiddleware)
  );
  

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