Using RTK query to fetching data inside of a thunk

[agusterodin]

I have performed queries and mutations inside thunks in the past when absolutely necessary.

I have never needed to access the result of a query in the past and consume it inside of a component. I have to do this to perform submission validations with react-final-form so I can't use hooks.

registration.effects.ts

import { createAsyncThunk } from '@reduxjs/toolkit'
import { authValidationApiEndpoints } from 'carbon-lib-ui/authentication/api'

export const checkEmailAddressAvailable = createAsyncThunk(
  'registration/checkEmailAddressAvailable',
  async (emailAddress: string, { getState, dispatch }) => {
    const result = dispatch(authValidationApiEndpoints.checkEmailAddressAvailability.initiate(emailAddress))
    result.unsubscribe()
    const response = await result
    return response.data
  }

Validation function for react-final-form

export async function userCredentialsAsyncErrors(
  formData: RegistrationFormFields,
  dispatch: Dispatch<any>
): Promise<Partial<RegistrationFormFields> | undefined> {
  try {
    const emailAddressAvailable = await dispatch(checkEmailAddressAvailable(formData.emailAddress)).unwrap()
    console.log('emailAddressAvailable', emailAddressAvailable)
    return emailAddressAvailable ? undefined : { emailAddress: 'An account already exists with this email address.' }
  }
  catch (err) {
    return { emailAddress: 'Couldn\'t connect to server to check email address availablity. Please try again later.' }
  }
}

I am getting this error

Am I overlooking something obvious? I looked at examples: https://redux-toolkit.js.org/rtk-query/usage/usage-without-react-hooks and https://redux-toolkit.js.org/api/createAsyncThunk and still can't figure out what I am doing wrong :(

[phryneas]

Dispatch<any> should be ThunkDispatch<AnyAction>.

Also, make sure to use the 1.7 beta, that is much more consistent in these situations

[agusterodin]

I appreciate it!

Using RTK with next-redux-wrapper makes things more complicated :( I would use the store and dispatch method directly if it wasn't so hard to export the store directly when using next-redux-wrapper.

[phryneas]

Redux-next-wrapper should actually use the exact types from your store in the latest version