Unable to see asynchronous actions dispatched in Redux DevTools when using Redux Toolkit, Redux Saga, and Redux DevTools

Question

I'm currently using Redux Toolkit along with Redux Saga for managing asynchronous actions in my React application. However, I'm facing an issue where I'm unable to see asynchronous actions being dispatched in the Redux DevTools, while normal actions are shown correctly.

I've created asynchronous actions using createAction from Redux Toolkit. Below is how my store is configured:

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

Answer 1

I found that Redux DevTools, by default, shows the latest 50 actions. In my case, the asynchronous actions were getting replaced by other actions, causing them not to be shown in the DevTools "Inspect" section.

To resolve this issue, you can adjust the maxAge property in the configureStore function:

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

Reference

You can see the options can be passed to devTools