Api 调用 redux-saga 导致 redux-devtools-extension 崩溃

Question

我正在尝试使用 axios 和 redux-saga 进行一些 api 调用。这是我以前没有做过的，而且 redux devtools 通常可以很好地处理这个问题。出于某种原因，在我正在处理的当前应用程序中，任何触发传奇的操作，然后进行 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 调用都会导致 devtools 冻结和崩溃？

Answer 1

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

Api 调用 redux-saga 导致 redux-devtools-extension 崩溃

Api calls in redux-saga crashing redux-devtools-extension

react-redux

redux-saga

redux-devtools

redux-devtools-extension