Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Redux toolkit, dispatching thunk type missing

I'm using redux-toolkit, and trying to dispatch a thunk. The dispatch function I'm using looks like this, this is directly taken from the docs. eslint complains about the missing return type, any idea what it should be?

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

Furthermore I get the same error, as in this question How to dispatch an Action or a ThunkAction (in TypeScript, with redux-thunk)?, but there's no real solution there as far as I understood it.

So if I got code like this:

export const fetchSomeThing = createAsyncThunk<SomeType[]>('someThing/fetch', async () => {
  const someClient = useSomeClient();
  const someThing: SomeType[] = await someClient.listSomething();
  return someThing;
});

// I also tried typing dispatch as AppDispatch here explicitly, but it gives me the same error
const dispatch = useAppDispatch();
dispatch(fetchSomeThing()) //This gives an error: Property 'type' is missing in type 'AsyncThunkAction<SomeType[], void, {}>' 
// but required in type 'AnyAction'.ts(2345), index.d.ts(21, 3): 'type' is declared here.

My store looks like this:

export const store = configureStore({
  reducer: {
    someThing: someThingReducer,
  },
});

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch; // According to vs-code this is of type AppDispatch = Dispatch<AnyAction>
like image 791
supermar10 Avatar asked May 14 '21 09:05

supermar10


1 Answers

This recently seems to happen when people have [email protected] and [email protected] installed in some way side-by-side and can usually be resolved by re-installing @types/react-redux by doing npm i @types/react-redux or yarn add @types/react-redux. Could you please try that?

like image 112
phry Avatar answered Oct 20 '22 08:10

phry