[FIXED] Why do I get : Argument of type 'AppThunk<void>' is not assignable to parameter of type 'AnyAction'?

Issue

Argument of type 'AppThunk' is not assignable to parameter of type 'AnyAction'.

I'm working on a React/TypeScript app. It was built using create-react-app with the TypeScript - Redux template. I didn't make any code changes to anything in the counter feature that comes as part of the demo. I npm installed redux-logger, and just adding that as middleware in src/app/store.ts causes my code to break in src/features/counter/Counter.tsx.

I have pushed my code to GitHub, and created a sandbox: https://codesandbox.io/p/github/dwaynedraper/frontend-react-demo/master?file=%2Fsrc%2Ffeatures%2Fcounter%2FCounter.tsx This should open to the page with the problems.

I am not sure what to try.

I did check to make sure I'm using properly typed hooks for dispatch according to the docs. As a matter of fact, this is code directly from the create-react-app that breaks with redux-logger middleware.

I also tried doing a global search of my code for the type it mentions, and I don't get any results in my search. I can't figure out where the typing that is causing this issue is coming from.

Solution

In your store configuration

export const store = configureStore({
  reducer: {
    counter: counterReducer,
    auth: authReducer,
  },
  devTools: true,
  middleware: [logger],
});

you replaced all pre-existing middleware (including redux-thunk) with only logger.

Do this instead:

export const store = configureStore({
  reducer: {
    counter: counterReducer,
    auth: authReducer,
  },
  devTools: true,
  middleware: getDefaultMiddleware => getDefaultMiddleware().concat(logger),
});

Answered By - phry
Answer Checked By - - Willingham (ReactFix Volunteer)