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

Question

我最近一直在集成 redux-toolkits 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 类型。

假设您的动作创建者 ( ) 输入正确（如果您遵循我们的 RTK TS 使用指南，toggleSomething则应该如此），将正确推断回调内部的类型。startListeningactioneffect

这就留下了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
>