我正在尝试将redux存储迁移到RTK和RTK查询-并使我的RTL测试与它一起工作
我将进行逐步重写-逐个转换每个减速器。
我重新创建了应用程序中使用的存储--用configureStore替换createStore--并添加了用于API处理的中间件,如下所示:
import { vendorPaymentsApiSlice } from './vendorPaymentsAPISlice';
const rootReducer = combineReducers({
users: userReducer,
[vendorPaymentsApiSlice.reducerPath]: vendorPaymentsApiSlice.reducer
})
//vendorPaymentsApiSlice.reducerPath is set to "vendorpaymentsApi"
const store = configureStore({
reducer: rootReducer,
middleware: [
...getDefaultMiddleware(),
sagaMiddleware,
vendorPaymentsApiSlice.middleware,
],
});
此设置在真实的应用程序中运行良好。API的中间件链接按预期工作。
对于我的测试,我使用了一个模拟存储-它用mockHistory替换了history,但它基本上是相同的代码-相同的rootReducer和相同的中间件数组。
在我的测试中,我已经为API调用编写了一个msw拦截器-并且该拦截器正在被调用:
但一旦发生这种情况,我就收到以下错误消息:
Warning: Middleware for RTK-Query API at reducerPath "vendorpaymentsApi" has not been added to the store.
Features like automatic cache collection, automatic refetching etc. will not be available.
因此,从api在redux中进行数据设置失败。
在阅读了this之后,我尝试了许多添加中间件的方法,
getDefaultMiddleware().concat([
sagaMiddleware,
vendorPaymentsApiSlice.middleware,
])
但还是不行。
需要一些帮助来理解为什么这个API的链接没有在测试中发生。
非常感谢您阅读本文
2条答案
按热度按时间b4lqfgs41#
设置中间件的正确方法是
但我不能100%确定这是否是您的问题。您真的在测试中使用了这个存储(您应该使用!),而不是某种模拟存储吗?
您已为API指定
"vendorpaymentsApi"
的reducerPath
,然后将其作为vpApi
装载到存储中。请将reducerPath
选项更改为vpApi
,或将vpApi: vpApi.reducer
更改为vendorpaymentsApi: vpApi.reducer
juzqafwq2#
我尝试在一个更简单的repo here中重新创建此错误
问题不在配置存储中的中间件声明中,而是在正在使用的另一个模式中。
模式:“不是每次测试redux连接组件时都创建一个新的存储(如here所述)-使用存储单例并调度一个操作,将存储重置为从测试传递的初始数据”
如this file所示
但问题是,我忘记了在浅合并传递的数据之前,将api reducer设置为默认的空状态,该状态被用作基本状态:
我已经省略了“api”键,这是导致这个错误-一旦我添加回来-错误消失了。