使用 Typescript 的 Redux-Saga 中间件出现类型错误

Question

我正在尝试使用 redux-saga 来消除副作用。由于 `createStore` 已被弃用，我尝试使用 *@reduxjs/toolkit* （版本 2.0.1）中的 `configureStore`。我遵循了不同的教程，发现有两种可能性：

import { configureStore } from "@reduxjs/toolkit";
import createSagaMiddleware from "redux-saga";
import rootReducer from "./rootReducer";
import logger from 'redux-logger'
import { useDispatch } from 'react-redux'
import { rootSaga } from './rootSaga'

const sagaMiddleware = createSagaMiddleware();

const store = configureStore({
    rootReducer,
    middleware: (gDM) => gDM().concat(logger, sagaMiddleware)
  })

sagaMiddleware.run(rootSaga)

export type AppDispatch = typeof store.dispatch
export const useAppDispatch: () => AppDispatch = useDispatch

export default store;

这给了我这个错误：

Type '(gDM: GetDefaultMiddleware<any>) => Tuple<[ThunkMiddleware<any, UnknownAction, undefined>, Middleware<{}, any, Dispatch<AnyAction>>, SagaMiddleware<...>]>' is not assignable to type '(getDefaultMiddleware: GetDefaultMiddleware<any>) => Tuple<[ThunkMiddleware<any, UnknownAction, undefined>]>'.
  Type 'Tuple<[ThunkMiddleware<any, UnknownAction, undefined>, Middleware<{}, any, Dispatch<AnyAction>>, SagaMiddleware<object>]>' is not assignable to type 'Tuple<[ThunkMiddleware<any, UnknownAction, undefined>]>'.
    Type '[ThunkMiddleware<any, UnknownAction, undefined>, Middleware<{}, any, Dispatch<AnyAction>>, SagaMiddleware<object>]' is not assignable to type '[ThunkMiddleware<any, UnknownAction, undefined>]'.
      Source has 3 element(s) but target allows only 1

（如果我删除记录器，最后一行将变为源有 2 个元素，但目标仅允许 1 个）

或

import { configureStore, Tuple } from "@reduxjs/toolkit";
import createSagaMiddleware from "redux-saga";
import rootReducer from "./rootReducer";
import logger from 'redux-logger'
import { useDispatch } from 'react-redux'
import { rootSaga } from './rootSaga'

const sagaMiddleware = createSagaMiddleware();

const store = configureStore({
    rootReducer,
    middleware: () => new Tuple(logger, sagaMiddleware)
  })

sagaMiddleware.run(rootSaga)

export type AppDispatch = typeof store.dispatch
export const useAppDispatch: () => AppDispatch = useDispatch

export default store;

这给了我这个错误：

Type '() => Tuple<[Middleware<{}, any, Dispatch<AnyAction>>, SagaMiddleware<object>]>' is not assignable to type '(getDefaultMiddleware: GetDefaultMiddleware<any>) => Tuple<[ThunkMiddleware<any, UnknownAction, undefined>]>'.
  Type 'Tuple<[Middleware<{}, any, Dispatch<AnyAction>>, SagaMiddleware<object>]>' is not assignable to type 'Tuple<[ThunkMiddleware<any, UnknownAction, undefined>]>'.
    Type '[Middleware<{}, any, Dispatch<AnyAction>>, SagaMiddleware<object>]' is not assignable to type '[ThunkMiddleware<any, UnknownAction, undefined>]'.
      Source has 2 element(s) but target allows only 1.

如果我删除记录器，错误将变为：

Type '() => Tuple<[SagaMiddleware<object>]>' is not assignable to type '(getDefaultMiddleware: GetDefaultMiddleware<any>) => Tuple<[ThunkMiddleware<any, UnknownAction, undefined>]>'.
  Type 'Tuple<[SagaMiddleware<object>]>' is not assignable to type 'Tuple<[ThunkMiddleware<any, UnknownAction, undefined>]>'.
    Type '[SagaMiddleware<object>]' is not assignable to type '[ThunkMiddleware<any, UnknownAction, undefined>]'.
      Type 'SagaMiddleware<object>' is not assignable to type 'ThunkMiddleware<any, UnknownAction, undefined>'.
        Types of parameters 'next' and 'next' are incompatible.
          Type 'unknown' is not assignable to type 'T'.
            'T' could be instantiated with an arbitrary type which could be unrelated to 'unknown'

我对 Typescript 很陌生，我不明白问题出在哪里......我在网上搜索，但找不到任何有用的东西。
提前感谢您的耐心。

Answer 1

查看这个 GitHub Issue，看起来和你的问题是一样的。

貌似从redux toolkit v2开始有类型更新，将redux中间件类型从v4更新为v5，导致使用v4中间件的中间件包不兼容。

我认为您必须在两种解决方案之间进行选择。

1. 决定不使用redux工具包v2，手动将其版本更改为最新的v1（我猜是

   1.9.7

   ）
2. 覆盖

   redux-logger

   ,

   redux-saga

   的 redux 版本依赖到 v5，如 here
中所述

还有一件事：我认为

rootReducer

必须作为

reducer

属性给出，并且

redux-logger

中间件应该是最后一个中间件

注意：logger必须是链中的最后一个中间件，否则它将记录thunk和promise，而不是实际操作（ref）

// ...
const store = configureStore({
  reducer: rootReducer,
  middleware: (gDM) => gDM().concat(sagaMiddleware, logger)
})
// ...