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

如何解决自定义中间件导致 redux 中的循环引用

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

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'，因为它没有类型注释并且在它自己的初始化程序中被直接或间接引用。

解决方法

在那种情况下，你必须以某种方式打破这个圈子。

最简单的方法是

export type RootState = ReturnType<typeof customReducer>

---

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

使用给定的代码它不起作用 - 您需要在创建商店之前拆分该减速器创建：

const rootReducer = combineRecucers({
        custom: customReducer
})

export type RootState = ReturnType<typeof rootReducer>

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

})

,

啊，好的，我想通了。问题在于我如何定义自定义中间件。该文档只是将导出定义为中间件：

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

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

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

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

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

我真傻...

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