Почему я получаю сообщение об ошибке "Свойство 'then' не существует для типа 'AsyncThunkAction'"?

#reactjs #redux #redux-thunk #redux-toolkit

#reactjs ( реакция ) #переопределение #переопределение-инструментарий #reactjs #redux-thunk #redux-toolkit

Вопрос:

Кажется, я не могу получить функцию Promise from createAsyncThunk от Redux-toolkit Я довольно новичок в Typescript, и я изо всех сил пытаюсь понять, почему это выдает мне Property 'then' does not exist on type 'AsyncThunkAction<Student, number, {}>' ошибку, хотя обещание возвращается, если я удаляю ввод. Вот мой createAsyncThunk f-n

 export const getStudentByIdRequest = createAsyncThunk<Student, number>(
  'student/getStudentByIdRequest',
  async (id, { rejectWithValue }) => {
    try {
      const { data } = await instance.get(`student/${id}/`)
      return data
    } catch (err) {
      let error: AxiosError = err
      if (error) {
        return rejectWithValue({
          message: `Error. Error code ${error.response?.status}`,
        })
      }
      throw err
    }
  }
)

И вот как я отправляю его из своего React компонента

 dispatch(getStudentByIdRequest(userId)).then((res) => console.log(res))

Ошибка появляется там, где я пытаюсь вызвать then на thunk

Ответ №1:

Ваш dispatch не учитывает типы для thunks и, следовательно, возвращаемый тип введен неправильно. Пожалуйста, используйте фактический Dispatch тип из хранилища, как описано в документации:

 import { configureStore } from '@reduxjs/toolkit'
import { useDispatch } from 'react-redux'
import rootReducer from './rootReducer'

const store = configureStore({
  reducer: rootReducer
})

export type AppDispatch = typeof store.dispatch
export const useAppDispatch = () => useDispatch<AppDispatch>() // Export a hook that can be reused to resolve types

а затем используйте useAppDispatch вместо useDispatch в вашем компоненте.

1. Я сделал это, и мне также пришлось изменить middleware: [thunk] as const на middleware: getDefaultMiddleware() в configureStore функции, и теперь я получаю сообщение об ошибке ` ReferenceError: не удается получить доступ к ‘userReducer’ перед инициализацией ` Именно из-за этой ошибки я отказался от использования useAppDispatch в первую очередь

2. Неважно, я решил это, переместив мою Axios функцию перехватчика из apiConfig.ts файла в index.ts , как предложено здесь github.com/reduxjs/redux-toolkit/issues/… Спасибо за вашу помощь!

Ответ №2:

Другим потенциальным решением для этого может быть использование ThunkDispatch type вместо plain Dispatch , поскольку plain Dispatch не предназначен для обработки асинхронных данных.

Определение многоразового useAppThunkDispatch крючка в магазине.ts:

 import { Action, ThunkDispatch, configureStore } from '@reduxjs/toolkit';

export const store = configureStore({
    reducer: {
        blog: blogSlice,
    },
});

export type RootState = ReturnType<typeof store.getState>;

export type ThunkAppDispatch = ThunkDispatch<RootState, void, Action>;

export const useAppThunkDispatch = () => useDispatch<ThunkAppDispatch>();

Затем вы можете использовать useAppThunkDispatch hook в своем приложении так же, как useAppDispatch или useDispatch hook.

Ответ №3:

Проблема, с которой я столкнулся, была очень похожа на эту, я работал над чем-то, основанным на документации Redux Toolkit, и следующее просто не сработало:

 
let dispatch = useDispatch()

Дело в том, что в руководстве используется useDispatch() для персонализированного хука, который экспортируется как useAppDispatch()

 import { useAppDispatch } from "app/hooks";

Если вы используете правильный импорт и типы, вы сможете решить эту проблему.