使用Typescript将Thunk分发到商店

Question

In my main store.ts I have this:

 const store = createStore( rootReducer, composeWithDevTools(applyMiddleware(thunk)) ); store.dispatch(fetchUser()); 

So on the first render it dispatches and action to fetchUser to see if he/she can see the content.

This is the thunk:

 export const fetchUser = (): ThunkAction< void, TRootState, null, Action > => async dispatch => { const response = await axios.get(GET_USER_INFORMATION); dispatch({ type: FETCH_USER, payload: response.data }); }; 

But Typescript throws an error:

 src/store/index.ts (14,16): Argument of type 'ThunkAction<void, { userReducer: any; }, null, Action<any>>' is not assignable to parameter of type 'AnyAction'. Property 'type' is missing in type 'ThunkAction<void, { userReducer: any; }, null, Action<any>>'. 

store/index.ts line 14:

store.dispatch(fetchUser())

Honestly, I'm lost. How can I fix that? I don't want to type 'any' in the thunk.

Answer 1

store.dispatch only accepts an action, not function. but the thunk overrides it. you need to specify the thunk type.

try this

composeWithDevTools(applyMiddleware(thunk as ThunkMiddleware<RootState, RootAction>))

also, check this official docs