typescript - 如何输入 Redux-Toolkit createListenerMiddleware 监听器条目

Question

我一直在集成 redux-toolkit createListenerMiddleware最近，但我现在有点陷入困境。我正在尝试输入一些“监听器条目”，但似乎无法管理它。智能感知对我来说没有意义，我在文档或网上找不到任何与此相关的示例。目标是输入 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
  },
});

Answer 1

startListening 旨在尽可能推断正确的 TS 类型。

假设您的操作创建者 ( toggleSomething ) 输入正确(如果您遵循 our RTK TS usage guidelines ，则应该如此)，startListening 将正确推断出effect 回调中的 action。

剩下的是getState的类型。 RTK 和 TS 无法提前知道这一点，因为中间件会添加到存储中。这就是为什么我们设计 API 来让您创建应用了正确状态类型的 startListening 的“预输入”版本，如此处的 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
>