reactjs - Redux Toolkit กับ TypeScript: ฉันจะทำให้ค่าที่ส่งกลับจาก async thunk มีประเภทอย่างถูกต้องได้อย่างไร

ฉันมี async thunk แบบนี้

export const updateIndexingConfig = createAsyncThunk(
  "settings/updateIndexingConfig",
  (config: UpdateIndexingConfigurationRequest) => {
    return sdkClient.updateIndexingConfiguration(config).promise();
  }
);

คำขออัปเดตสามารถส่งข้อความแสดงข้อผิดพลาดได้หากมี updateIndexingConfiguration.promise() จะส่งกลับเป็น promise และมันจะถูกเรียกใช้เมื่อผู้ใช้คลิกที่ปุ่มนี้

<Button
  onClick={async () => {
    if (!isFormValid()) return;
    const updateIndexingConfigResponse = await dispatch(
      updateIndexingConfig(constructUpdateIndexingConfigRequest(indexingConfig))
    );
    if(updateIndexingConfigResponse.error) {
      // ... show error banner 
    } else {
      window.location.href = "#/settings/";
    }
  }}
>
  Update
</Button>;

ตัวคอมไพเลอร์ TypeScript กำลังแสดงข้อผิดพลาดนี้กับบรรทัดนี้ if(updateIndexingConfigResponse.error) โดยบอกว่า

คุณสมบัติ 'error' ไม่มีอยู่ในประเภท 'AsyncThunkAction'.

ฉันคิดว่าน่าจะเป็นเพราะ SDK ไม่มีการกำหนดประเภทการตอบสนอง แต่จากการอ่านเอกสารของมัน ฉันรู้ว่าการตอบสนองอาจมีข้อความแสดงข้อผิดพลาดเมื่อเกิดปัญหา ดังนั้นฉันจึงสร้างขึ้นเองอย่างรวดเร็ว

interface UpdateIndexingConfigurationResponse {
  error?: {
    message: string;
  };
  [key: string]: any;
}

และฉันได้เพิ่มมันที่ thunk

export const updateIndexingConfig = createAsyncThunk(
  "settings/updateIndexingConfig",
  (config: UpdateIndexingConfigurationRequest): UpdateIndexingConfigurationResponse => {
    return sdkClient.updateIndexingConfiguration(config).promise();
  }
);

อย่างไรก็ตาม คอมไพเลอร์ยังไม่พอใจกับมันเมื่อฉันเข้าถึง error บนการตอบกลับที่ส่งกลับจากการ dispatch

คุณสมบัติ 'error' ไม่มีอยู่ในชนิด 'AsyncThunkAction'.

ไม่แน่ใจว่าฉันพลาดอะไรไปบ้าง ที่นี่ฉันจะพิมพ์คำตอบได้อย่างถูกต้องอย่างไรในกรณีนี้?

นอกจากนี้เป็นคำถามเล็กน้อย คอมไพเลอร์ TS ก็ร้องเตือนฉันที่ await dispatch(updateIndexingConfig(...)) โดยบอกว่า

'await' ไม่มีผลกับประเภทของ expression.ts(80007)

แต่ฉันรู้ว่ามันมีผลจริง ๆ ในกรณีนี้มันจะ await

เอาล่ะ กรุณาอย่าสงสัยว่ารหัสทำงานหรือไม่ หรือแม้ว่าฟังก์ชัน sdkClient.updateIndexingConfiguration(config).promise() จะส่งค่ากลับเป็น promise หรือไม่ ผมทดสอบแล้วและรู้ว่ามันทำงาน แค่การพิมพ์ชนิดข้อมูลหายไป และนั่นคือคำถามของผม

คำตอบ #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

คำตอบ #2

ดูเหมือนว่าฟังก์ชันภายในของคุณอาจจะไม่ได้ส่งค่ากลับเป็น Promise ซึ่งมันจำเป็นสำหรับการทำงานของ createAsyncThunk