使用 RTK-Query 中间件配置商店

Question

我正在尝试将 RTK-Query 中间件添加到嵌套存储结构中，当我添加 api 中间件时，我收到一个很长且非描述性的打字稿错误...

这是我的代码：

export const rootReducer = combineReducers({
  foo: fooReducer,
  nested: combineReducers({
    bar: barReducer,
    [myFooApi.reducerPath]: myFooApi.reducer,  
  })
});

const store = configureStore({
  reducer: rootReducer,
  
  middleware: (getDefaultMiddleware) =>   // Getting TS2322 error: type is not assignable to type...
    getDefaultMiddleware().concat(tokenListsApi.middleware)

});

当我像这样将 [fooApi.reducerPath] 移动到 reducer 的根目录时，错误消失了：

export const rootReducer = combineReducers({
  foo: fooReducer,
  bar: barReducer,
  [fooApi.reducerPath]: fooApi.reducer,  
});

我正在寻找 RTK-Query Api reducer 的嵌套用法示例，但找不到任何...我错过了什么？

Answer 1

这已在一个问题中得到解答，但为了后代：

RTK 查询要求所有API slice reducer 设置为root state 的顶级slice，不能嵌套。 RTKQ 通过 TS 类型和运行时检查强制执行此操作。因此，这里的解决方法是将 [fooApi.reducerPath]: fooApi.reducer 移到状态树的根部。

使用 RTK-Query 中间件配置商店

Configuring the store with RTK-Query middleware

reactjs

redux

react-redux

redux-toolkit

rtk-query