redux-toolkit: `store.dispatch` does not work in 1.2.2

After migrating to 1.2.2 store.dispatch stopped working with the following error message:

Argument of type 'ThunkAction<void, CombinedState<{ auth: AuthState; }>, null, Action<string>>' is not assignable to parameter of type 'AnyAction'.
  Property 'type' is missing in type 'ThunkAction<void, CombinedState<{ auth: AuthState; }>, null, Action<string>>' but required in type 'AnyAction'.

Dispathing through dispatcher from hook works fine though:

  const dispatch = useDispatch();
  ...
  dispatch(logOut());  // OK

I can’t use React Hooks in the axios interceptor, so I was using this:

import store from '../../store';

store.dispatch(logOut());

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 11
Comments: 15 (7 by maintainers)

Commits related to this issue

correctly infer dispatch from provided middlewares (#304) * correctly infer dispatch from provided middlewares * simplify getDefaultMiddleware typings * test readability * documentation, upd... — committed to reduxjs/redux-toolkit by phryneas 4 years ago
fix #321 — committed to phryneas/redux-toolkit by deleted user 4 years ago
Better generic argument for default Thunk Middleware (#329) * fix #321 * better type for AppThunk in advanced tutorial * keep backwards-compatiblity with ThunkActions with a `null` ExtraArgumen... — committed to reduxjs/redux-toolkit by phryneas 4 years ago

Most upvoted comments

@phryneas

Updated to unknown type and installed the sandbox… it seems to work 😉

Thanks for your help, very clear and super pro… Amazing 😃

belgattitude on Jan 24, 2020

@phryneas,

Does it work if you change it like this?

+ export type AppThunk = ThunkAction<void, RootState, undefined, Action<string>>;

Nope

error TS2345: Argument of type 'null' is not assignable to parameter of type 'undefined'.
55  await runLogoutThunk({ tokenStore: ts })(dispatch, getState, null);

Setting it to unknown does the job, but I’m not sure about the implications.

belgattitude on Jan 24, 2020

@phryneas For me it does indeed fix the issue and everything works fine 😃

yhnavein on Jan 24, 2020

@belgattitude I think I can see the problem there. Does it work if you change it like this?

- export type AppThunk = ThunkAction<void, RootState, null, Action<string>>;
+ export type AppThunk = ThunkAction<void, RootState, undefined, Action<string>>;

I believe I may have found the root cause for this:

Now, we get Dispatch from the middleware via

M extends Middleware<infer DispatchExt, any, any>
  ? DispatchExt extends Function
    ? DispatchExt
  : never
: never

and our Middleware is per default

ThunkMiddleware<S>. After some resolving, all these are equal:

type DefaultMiddleware<S> = ThunkMiddleware<S>
type DefaultMiddleware<S> = ThunkMiddleware<S, AnyAction, undefined, ThunkDispatch<S, undefined, AnyAction>>
type DefaultMiddleware<S> = Middleware<ThunkDispatch<S, undefined, AnyAction>, S, <ThunkDispatch<S, undefined, AnyAction>

So we’d extract a Dispatch type of ThunkDispatch<S, undefined, AnyAction> from this.

Back in 1.2.1, the Dispatch type was ThunkDispatch<S, any, AnyAction> which would not conflict with the new Dispatch type, but was a little more loose. Unfortunately, the advanced tutorial recommends adding type AppThunk = ThunkAction<void, RootState, null, Action<string>> which would have been compatible with the old, more loose definition, but not with the new definition that is more strict, but more in line with the redux-thunk default behavior.

Let’s see if my fix above would fix it for @belgattitude - as a result, I might have to specify the ThunkMiddleware to be a ThunkMiddleware<S, AnyAction, any, ThunkDispatch<S, any, AnyAction>>. Or we change the tutorial and try to communicate the breakage there. Would be cleaner, but more of a hassle for users. What do you think @markerikson ?

phryneas on Jan 23, 2020