Redux Toolkit addListener 组件中的打字稿错误（createListenerMiddleware）

Question

我正在按照 Redux Toolkit 的文档 在我的组件中添加监听器，如下所示：

import { useDispatch } from 'react-redux'

...
const dispatch = useDispatch()
useEffect(() => {
    return dispatch(
      addAppListener({
        matcher: isAnyOf(
          updateResponse,
          ...
        ),
        effect: async (action, listenerApi) => {
           ...
        }
      })
    )
  }, [])

我还按照文档中的建议输入了应用程序侦听器。以下是我的做法，供参考：

import { addListener, createListenerMiddleware } from '@reduxjs/toolkit'
import type { TypedAddListener, TypedStartListening } from '@reduxjs/toolkit'
import type { AppDispatch, RootState } 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
>

但是，我的组件中的

useEffect

返回出现以下错误：

Argument of type '() => { payload: ListenerEntry<EmptyObject & { user: WritableDraft<UserState>; authentication: AuthenticationState; }, ((action: Action<...>) => UnsubscribeListener) & ... 1 more ... & Dispatch<...>>; type: "listenerMiddleware/add"; }' is not assignable to parameter of type 'EffectCallback'.
  Type '{ payload: ListenerEntry<EmptyObject & { user: WritableDraft<UserState>; authentication: AuthenticationState; }, ((action: Action<...>) => UnsubscribeListener) & ... 1 more ... & Dispatch<...>>; type: "listenerMiddleware/add"; }' is not assignable to type 'void | Destructor'.

知道是什么原因造成的吗？

Answer 1

您似乎没有在该组件中使用正确键入的

useDispatch

版本。它仍然只是使用基本的 Redux 内置

Dispatch

类型，它不知道你已经设置了侦听器中间件。

您需要按照我们的指示，根据您商店的配置设置预先键入的

useDispatch

版本，并在此组件中使用该预先键入的挂钩：

• https://redux.js.org/tutorials/typescript-quick-start#define-typed-hooks