redux-saga 中的 Api 调用导致 redux-devtools-extension 崩溃答案

【问题标题】：Api calls in redux-saga crashing redux-devtools-extensionredux-saga 中的 Api 调用导致 redux-devtools-extension 崩溃
【发布时间】：2021-09-30 07:10:02
【问题描述】：

我正在尝试使用 axios 和 redux-saga 进行一些 api 调用。这是我以前没有做过的事情，redux devtools 通常可以很好地处理这个问题。由于某种原因，在我正在处理的当前应用程序中，任何触发 saga 的操作，然后进行 api 调用，似乎都会使我的 redux-devtools-extension 崩溃。我知道 redux-devtools-extension 总是有点错误，但我无法解释为什么这些操作可能会导致它崩溃。这是一个典型的传奇：

function* serverRefresh(): Generator {
  try {
    yield call(axios.get, "/api/restart");  // <------ crashes devtools extension
  } catch (e) {
    console.log(e);
  }
}

function* watchServerRefresh(): Generator {
  yield takeEvery(ActionTypes.RESTART_SERVER, serverRefresh);
}

export function* serverSagas(): Generator {
  yield all([fork(watchServerRefresh)]);
}

请注意，如果我注释掉 axios 调用，扩展程序可以正常工作，正确注册操作。不是来自 sagas 的其他动作没有问题。从 axios 切换到 fetch 没有帮助。这里没有太多可能导致无限循环或触发 CPU 过载的逻辑 - 它是一个简单的 api 调用。

以下是我设置商店和 devtools 扩展的方式：

function* rootSaga(): Generator {
  yield all([fork(serverSagas), fork(campaignSagas)]);
}

const sagaMiddleware = createSagaMiddleware();

const rootReducer = combineReducers({ ...reducers });

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

sagaMiddleware.run(rootSaga);

为什么非 saga 操作或 saga 非 api 调用操作可以正常工作，但几乎所有使用 fetch 或 axios 进行的 api 调用都会导致开发工具冻结和崩溃？

【问题讨论】：

不使用call效果直接调用axios有什么区别吗？ yield call(axios.get, "/api/restart"); -> yield axios.get("/api/restart");
很遗憾，没有，没有区别。先前的操作之一将对象存储在具有循环引用的存储中。那不会冻结开发工具，但一旦圆形对象已经在商店中，它可能会触发新的操作导致它冻结？
可能，应该很容易尝试移除圆形结构以测试是否有帮助。
这就是问题所在。我将圆形对象移动到本地状态，它解决了崩溃问题。如果它对其他人有帮助，我将回答这个问题，并写一个关于在商店中保存圆形对象的新问题。谢谢！

标签： react-redux redux-saga redux-devtools redux-devtools-extension

【解决方案1】：

我在问题中没有提到的问题是，redux 存储会冻结在动作 X 之后发生的任何动作。动作 X 是一个在存储中存储对循环对象的引用的动作。（对于那些感兴趣的人来说，它是一个传单地图实例。）虽然该操作没有使 devtools 崩溃，而且我什至可以使用 devtools 检查传单地图实例圆形对象就好了，之后发生的任何操作该循环对象存储在存储中。所以这实际上与 sagas 或 api 调用无关，而是与在 store 中保存循环对象有关，我们都知道这是一个 bad idea。我想我可以将那个对象移到一个反应上下文对象上。

【讨论】：