使用 Redux Toolkit、Redux Saga 和 Redux DevTools 时无法看到 Redux DevTools 中分派的异步操作

Question

我目前正在使用 Redux Toolkit 和 Redux Saga 来管理 React 应用程序中的异步操作。但是，我面临一个问题，即我无法看到 Redux DevTools 中分派的异步操作，而正常操作却正确显示。

我使用 Redux Toolkit 中的 createAction 创建了异步操作。以下是我的商店的配置方式：

const store = configureStore({
      reducer: createReducer(),
      middleware: [sagaMiddleware],
      devTools: true,
    });

Answer 1

我发现 Redux DevTools 默认显示最新的 50 个操作。就我而言，异步操作被其他操作取代，导致它们不会显示在 DevTools“检查”部分中。

要解决此问题，您可以调整configureStore函数中的maxAge属性：

const store = configureStore({
  reducer: createReducer(),
  middleware: [sagaMiddleware],
  devTools: { maxAge: 500 }, // Set the maximum number of actions displayed
});

参考

你可以看到options可以传递给devTools