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 呼び出しをコメント アウトすると、拡張機能が正常に動作し、アクションが適切に登録されることに注意してください。サガ以外のアクションは問題ありません。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 呼び出しによって開発ツールがフリーズしてクラッシュするのはなぜですか?