0

我正在尝试使用 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-call 操作可以正常工作，但几乎所有使用 fetch 或 axios 进行的 api 调用都会导致 devtools 冻结和崩溃？

4

1 回答 1

0

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

于 2021-07-26T01:28:27.117 回答