I'm trying to make some api calls using axios and redux-saga. This is nothing I haven't done before, and redux devtools usually handles this just fine. For some reason in the current application I'm working on, any actions that trigger a saga, which then make an api call, seems to crash my redux-devtools-extension. I know that redux-devtools-extension has always been a bit buggy, but I can't put my finger on why these actions might be crashing it. Here's a typical saga:
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)]);
}
Note that if I comment out the axios call, the extension works fine, properly registering actions. Other actions not coming from sagas have no problem. Switching from axios to fetch does not help. There's not a lot of logic here that might cause an infinite loop or trigger CPU overload - its a simple api call.
Here's how I set up my store and devtools extension:
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);
Why might non-saga actions, or saga non-api-call actions, be working fine, but pretty much any api call made with fetch or axios cause the devtools to freeze and crash?
The issue, which I didn't mention in my question, was that the redux store would freeze on any action that ocurred after action X. Action X was an action that stored a reference to a circular object in the store. (Its a leaflet map instance, for those interested.) While that action did not crash the devtools, and I'm even able to examine the leaflet map instance circular object with the devtools just fine, any action that ocurred after that circular object is stored in the store. So this really had nothing to do with sagas or api calls, but rather with keeping circular objects in the store, which we all know is a bad idea. I guess I can move that object over to a react context object instead.