How do I resolve 'Property 'type' is missing in type 'AsyncThunkAction' using Redux Toolkit (with TypeScript)?

Question

I'm using Redux Toolkit with the thunk/slice below. Rather than set the errors in state, I figure I could just handle them locally by waiting for the thunk promise to resolve, using the example provided here.

I guess I could avoid doing this, and perhaps I should, by setting an error in the state but I sort of want to understand where I went wrong on this.

Argument of type 'AsyncThunkAction<LoginResponse, LoginFormData, {}>' is not assignable to parameter of type 'Action<unknown>'.
  Property 'type' is missing in type 'AsyncThunkAction<LoginResponse, LoginFormData, {}>' but required in type 'Action<unknown>'

The error arises when passing resultAction to match:

const onSubmit = async (data: LoginFormData) => {
  const resultAction =  await dispatch(performLocalLogin(data));
  if (performLocalLogin.fulfilled.match(resultAction)) {
    unwrapResult(resultAction)
  } else {
    // resultAction.payload is not available either
  }
};

thunk:

export const performLocalLogin = createAsyncThunk(
  'auth/performLocalLogin',
  async (
    data: LoginFormData,
    { dispatch, requestId, getState, rejectWithValue, signal, extra }
  ) => {
    try {
      const res = await api.auth.login(data);
      const { token, rememberMe } = res;
      dispatch(fetchUser(token, rememberMe));
      return res;
    } catch (err) {
      const error: AxiosError<ApiErrorResponse> = err;
      if (!error || !error.response) {
        throw err;
      }
      return rejectWithValue(error.response.data);
    }
  }
);

slice:

const authSlice = createSlice({
  name: 'auth',
  initialState,
  reducers: { /* ... */ },
  extraReducers: builder => {
    builder.addCase(performLocalLogin.pending, (state, action) => startLoading(state));
    builder.addCase(performLocalLogin.rejected, (state, action) => {
      //...
    });
    builder.addCase(performLocalLogin.fulfilled, (state, action) => {
      if (action.payload) {
        state.rememberMe = action.payload.rememberMe;
        state.token = action.payload.token;
      }
    });
  }
})

Thank you for any help!

score 42 · Accepted Answer · answered Jun 06 '20 at 21:57

42

Pretty sure that you're using the standard built-in Dispatch type there, which doesn't know anything about thunks.

Per the Redux and RTK docs, you'll need to define a more specific AppDispatch type that correctly knows about thunks and declare that dispatch here is that type, like:

    // store.ts
    export type AppDispatch = typeof store.dispatch;

    // MyComponent.ts
    const dispatch : AppDispatch = useDispatch();

    const onSubmit = async () => {
        // now dispatch should recognize what the thunk actually returns
    }

answered Jun 06 '20 at 21:57

markerikson

63,178
10
141
157

Yep, that was it. Thanks! – Chance Jun 06 '20 at 21:59
This solved my problem too, although it had to do with `.then` not being available on `dispatch`. I've read RTK and Redux docs a lot, and I've missed this every time! – tim.rohrer Aug 27 '20 at 03:58
2

This is a frequently-cited issue, so we clearly need to update the docs to highlight it further. – markerikson Aug 27 '20 at 18:49
10

I still saw the type error after declaring `dispatch` as `AppDispatch` because I used the spread operator to define the store's `middleware` option. As documented, using `getDefaultMiddleware().concat(...)` instead fixed it. – Max Smolens Aug 28 '20 at 19:15
@markerikson FWIW, the comments were pretty clear for me. I just happened to miss it in that case and didn't recognize it. – Chance Aug 29 '20 at 16:48
@markerikson thanks a lot. Not sure why creating a custom hook doesn't work here. The docs should definitely be updated. – Ivor Scott Sep 17 '20 at 19:21

score 4 · Answer 2 · answered Aug 29 '21 at 13:43

4

I had to add middleware: [thunk as ThunkMiddleware] to my configureStore() to get the correct types for createAsyncThunk()

answered Aug 29 '21 at 13:43

xRiot

239
2
2

score 0 · Answer 3 · answered Mar 11 '22 at 11:41

If none of the other answers help, one thing that ended up working for me was:

Delete the node_modules folder.
Delete yarn.lock/package-lock.json.
Run yarn install/npm install.

If you ensure you have everything else looking absolutely correct with the rest of your code like I did, then this should fix it up for you.

How do I resolve 'Property 'type' is missing in type 'AsyncThunkAction' using Redux Toolkit (with TypeScript)?

3 Answers3

Linked