自定义中间件导致redux循环引用

Question

我正在尝试使用提供的文档将 redux 项目转换为 typescript：

https://redux.js.org/usage/usage-with-typescript#type-checking-middleware

但是我在使用自定义中间件时遇到了问题。这是导致我出错的最小化和提取代码。

store.ts:

import { configureStore } from '@reduxjs/toolkit';

import reducer from './customReducer';

import { customMiddleware } from "./customMiddleware";

const store = configureStore({
    reducer: {
        custom: customReducer
    },
    middleware: getDefaultMiddleware => getDefaultMiddleware().prepend(customMiddleware)

})

export type RootState = ReturnType<typeof store.getState>

export default store

customMiddleware.ts:

import { Middleware } from 'redux';
import { RootState } from './store';

export const customMiddleware = (): Middleware<{}, RootState> => {
    return store => next => action => {
        return next(action);
    }
}

这会导致几条错误消息：在 const store = configur...:

'store' 隐式具有类型 'any' 因为它没有类型注释并且在其自己的初始化程序中直接或间接引用。

关于 RootState 导出：

类型别名 'RootState' 循环引用自身。

关于自定义中间件导出：

'customMiddleware' 隐式具有类型 'any' 因为它没有类型注释并且在其自己的初始化程序中被直接或间接引用。

Answer 1

在那种情况下，你将不得不以某种方式打破这个圈子。

这里最简单的方法是

export type RootState = ReturnType<typeof customReducer>

编辑：我认为您的初始代码是 reducer: customReducer

使用给定的代码将无法工作 - 您需要在创建商店之前拆分 reducer 创建：

const rootReducer = combineRecucers({
        custom: customReducer
})

export type RootState = ReturnType<typeof rootReducer>

const store = configureStore({
    reducer: rootReducer,
    middleware: getDefaultMiddleware => getDefaultMiddleware().prepend(customMiddleware)

})

Answer 2

啊，好的，我明白了。问题在于我如何定义我的 customMiddleware。文档简单地将导出定义为中间件：

export const customMiddleware: Middleware = store => next => action => {
    return next(action);
}

但我将导出作为 returns 中间件的函数，因为在我的实际代码中有一些初始化：

export const customMiddleware = (): Middleware => {
    return store => next => action => {
        return next(action);
    }
}

所以我只需要在前置时将其作为函数调用：

middleware: getDefaultMiddleware => getDefaultMiddleware().prepend(customMiddleware())

我真傻...

编辑：还需要使用根减速器类型。

自定义中间件导致redux循环引用

Custom middleware causes a circular reference in redux

typescript

redux

redux-middleware