How to log action created by createAsyncThunk?

[zeroarst]

I created a middleware like this

export const loggerMiddleware: Middleware = () => (next) => (action) => {
  console.log(action.type, { payload: action.payload })
  next(action)
}

And my store setup is:

export const store = configureStore({
  reducer: {   
    counter: counterReducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
    }).concat(loggerMiddleware)
})

I have a thunk created:

const fetchSomeData = createAsyncThunk(
  'api/fetchSomeData',
  async (arg) => {
  // call api to get data
  }
)

When I call await dispatch(fetchSomeData(arg)), I am expecting to see api/fetchSomeData in the consle.
But I cannot see it! I do see api/fetchSomeData/pending, api/fetchSomeData/fullfilled.

Is logging thunk supported?

[EskiMojo14]

are you dispatching fetchSomeData? await dispatch(fetchSomeData(arg))

[zeroarst]

Yes. Sorry the code has been simpified..

[EskiMojo14]

okay, you've edited - the behaviour you're seeing is correct.'api/fetchSomeData' is a prefix, createAsyncThunk creates pending/fulfilled/rejected actions based on it.
also, your middleware has a bug - remember to return next(action), otherwise you break other middlewares' ability to return values.