Redux Saga中Axios请求后yield put未正常执行，状态不更新求助

问题 #

我在Redux Saga中使用Axios发起GET请求，请求完成后通过yield put发送apiSuccess动作。相关代码如下：

my-saga.ts #

import { throttle, call, put } from "redux-saga/effects";
import axios from "axios";

import { SuccessfulResponse } from "@/types";

export function* apiWorker() {
  const response: SuccessfulResponse = yield call(
    axios.get,
    "https://my-url.com/api"
  );
  yield put(apiSuccess(response.data.Items));
}

export default function* apiWatcher() {
  yield throttle(1000, "API_REQUEST", apiWorker);
}

my-actions.ts #

import { createAction } from "@reduxjs/toolkit";

import { Items } from "@/types";

export const apiRequest = createAction("API_REQUEST");
export const apiSuccess = createAction(
  "API_SUCCESS",
  (items: Items) => ({
    payload: { items },
  })
);

my-store.ts #

import { createReducer } from "@reduxjs/toolkit";

import { ItemsContainer } from "@/types";

const initialState: ItemsContainer = {};

const rootReducer = createReducer(initialState as ItemsContainer, (builder) => {
  builder
    .addCase(apiRequest, (_state) => ({}))
    .addCase(apiSuccess, (_state, action) => action.payload);
});

export default rootReducer;

目前能拿到正确的API响应，且能确认apiSuccess的reducer分支已执行并获取到正确数据，但状态始终无法更新，Redux Devtools也未显示API_SUCCESS动作。奇怪的是，将Axios请求替换为模拟数据后，整个流程正常，状态更新无误。我尝试过替换为fetch，也用callApi函数包装Axios请求，但都无效。请求无错误响应，不知问题出在哪，求后续排查方向。

排查方向 #

• 给Saga添加错误捕获：当前apiWorker没有try/catch包裹，若请求过程中存在隐性错误（比如类型断言不匹配、响应字段缺失），会直接中断Saga流程，导致put(apiSuccess)从未执行。添加捕获逻辑并打印错误：

  export function* apiWorker() {
    try {
      const response: SuccessfulResponse = yield call(axios.get, "https://my-url.com/api");
      yield put(apiSuccess(response.data.Items));
    } catch (err) {
      console.error("Saga执行异常:", err);
    }
  }
  

• 校验SuccessfulResponse类型定义：打印Axios返回的完整response结构，对比你定义的类型是否完全匹配。如果实际响应和类型断言不符，会导致运行时隐性问题中断流程。

• 检查Saga中间件配置：确认store创建时正确挂载了saga中间件，且调用了sagaMiddleware.run()启动监听。比如：

  import createSagaMiddleware from "redux-saga";
  import { configureStore } from "@reduxjs/toolkit";
  import rootReducer from "./my-store";
  import apiWatcher from "./my-saga";
  
  const sagaMiddleware = createSagaMiddleware();
  const store = configureStore({
    reducer: rootReducer,
    middleware: (getDefault) => getDefault().concat(sagaMiddleware),
  });
  
  sagaMiddleware.run(apiWatcher); // 必须执行此步骤启动saga
  

• 替换throttle测试：暂时把throttle换成takeEvery，排除因请求触发频率过高被节流拦截，导致apiWorker未执行的可能。

• 确认apiSuccess引用一致性：检查saga文件和reducer文件中导入的apiSuccess是否为同一个action creator，避免因重复定义或路径错误导致动作类型不匹配。

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