createAsyncThunk type with correct dispatch not working

I found multiple errors regarding this, but everyone’s solution was that they used the dispatch function from react-redux. I’m using the one from my store, but I still get the Argument of type 'AsyncThunkAction<...> is not assignable to parameter of type 'AnyAction'. Property 'type' is missing in type

I am calling the createAsyncThunk function

export const connectToDevice = createAsyncThunk('name', async () => {async stuff being done here and returning a promise})

then i’m calling the createSlice and adding all 3 states under the extraReducers key of the connectToDevice action;

const s = createSlice({
name: '...',
initialState: initialState,
reducers: {},
extraReducers: (builder) => {
builder.addCase(connectToDevice.pending, (state: State, action) => {
      ...
    });
...
}
});

export default s.reducer;

and then in my store:

const store = configureStore({
  reducer: {
    s: s,
  },
});

export default store;
export type AppDispatch = typeof store.dispatch;

and then:

import {useDispatch} from 'react-redux';

import {AppDispatch, RootState} from '.';

export const useAppDispatch = () => useDispatch<AppDispatch>();

I’m new to react, redux but i guess after this point the useAppDispatch() should know about the thunk middleware…

so in my component:

const dispatch: AppDispatch = useAppDispatch();
dispatch(connectToDevice());

Still… I’ve got the error. What am I doing wrong?

[markerikson]

Hmm. That looks like it should be correct. Can you put up a CodeSandbox that reproduces this issue?

[Golyo88]

You are right @phryneas! Thanks a lot!