typescript - วิธีการพิมพ์รายการ listener ของ createListenerMiddleware ใน Redux-Toolkit

เมื่อเร็วๆ นี้ฉันได้ลองรวมการใช้งาน createListenerMiddleware ของ redux-toolkit แต่ตอนนี้ฉันติดอยู่เล็กน้อย ฉันพยายามจะระบุประเภทบางส่วนของ "listener entries" ของฉัน แต่ดูเหมือนจะทำไม่ได้ Intelli-sense ไม่เข้าใจสำหรับฉันเลย และฉันก็ไม่สามารถหาตัวอย่างในเอกสารหรือทางออนไลน์สำหรับเรื่องนี้ได้ เป้าหมายคือการมีตัวแปร listenerApi ที่ถูกระบุประเภท เพื่อฉันจะได้ใช้ฟังก์ชัน getState() ได้โดยไม่ต้องทำการแปลงประเภทใดๆ

มีวิธีง่ายๆ ในการทำสิ่งนี้หรือไม่?

ความช่วยเหลือใดๆ จะได้รับการชื่นชมอย่างมาก

listenerMiddleware.startListening({
  actionCreator: toggleSomething, // Action generator from reducer createSlice
  effect: async (
    action: AnyAction,
    listenerApi: ListenerEffectAPI<AppState, Dispatch> // Trying to type this in some way :[
  ): Promise<void> => {
    const state = (await listenerApi.getState()) as AppState; // TODO: type this better
  },
});

คำตอบ #1

startListening ถูกออกแบบมาเพื่อสรุปประเภท TS ที่ถูกต้องให้มากที่สุดเท่าที่จะทำได้

สมมติว่าฟังก์ชันสร้างแอคชันของคุณ ( toggleSomething ) ถูกพิมพ์ประเภทอย่างถูกต้อง (ซึ่งควรเป็นเช่นนั้นถ้าคุณกำลังปฏิบัติตามแนวทางการใช้งาน RTK TS ของเรา) startListening จะสามารถระบุประเภทของ action ภายใน callback effect ได้อย่างถูกต้อง

นั่นทำให้เกิดคำถามเกี่ยวกับประเภทของ getState RTK และ TS ไม่สามารถทราบล่วงหน้าได้ เพราะ middleware จะถูกเพิ่มเข้าไปใน store นั่นเป็นเหตุผลที่เราออกแบบ API ให้คุณสามารถสร้างเวอร์ชัน "pre-typed" ของ startListening ที่มีการประยุกต์ใช้ประเภท state ที่ถูกต้อง ดังแสดงในเอกสาร API ที่นี่:

• https://redux-toolkit.js.org/api/createListenerMiddleware#typescript-usage

ตัวอย่าง :

// listenerMiddleware.ts
import { createListenerMiddleware, addListener } from '@reduxjs/toolkit'
import type { TypedStartListening, TypedAddListener } from '@reduxjs/toolkit'

import type { RootState, AppDispatch } from './store'

export const listenerMiddleware = createListenerMiddleware()

export type AppStartListening = TypedStartListening<RootState, AppDispatch>

export const startAppListening =
  listenerMiddleware.startListening as AppStartListening

export const addAppListener = addListener as TypedAddListener<
  RootState,
  AppDispatch
>