正确配置 connected-react-router 和 Redux Toolkit Query 的 reducers

Question

我正在尝试设置 connected-react-router 和 RTK Query 的 reducers。
（旧代码库已经有 connected-react-router）
然后我收到这个错误。

fail to setup connectRouter

Type 'Reducer<RouterState<unknown>, AnyAction>' is not assignable to type 'Reducer<unknown, AnyAction>'.
Types of parameters 'state' and 'state' are incompatible.
Type 'unknown' is not assignable to type 'RouterState<unknown>'.

我的“mockApi”非常简单。 “orderApi”有点相同。

export const mockApi = createApi({
  reducerPath: "mockupPath",
  baseQuery: fetchBaseQuery({ baseUrl: "http://jsonplaceholder.typicode.com" }),
  endpoints: (builder) => ({
    getPost: builder.query<MockResonse, number>({
      query: (id) => `/posts/${id}`,
    }),
  }),
})
interface MockResonse { userId: number, id: number, title: string, body: string, }

虽然使用 combineReducers 不会产生类型错误，

reducer: combineReducers({
  router: connectRouter(history),
  [mockApi.reducerPath]: mockApi.reducer,
}),

但是我忘记了商店的类型。
知道商店的类型在开发中是一个巨大的优势，所以我想弄清楚如何解决这个错误。

请问我是不是哪里错了？

Answer 1

看来你可以在这里使用类型断言。
https://github.com/supasate/connected-react-router/issues/195

router: connectRouter(history) as Reducer,

Answer 2

将 connected-react-router 与较新版本的 history 和 react-router 一起使用时会出现此 TypeScript 错误。

connectRouter 函数的类型如下所示：

export function connectRouter<S = LocationState>(history: History<S>)
    : Reducer<RouterState<S>>

(source)

您可以看到它是一个泛型函数，其中泛型类型参数 S 指的是存储在您的历史记录中的 state 的类型。

如果您使用的是 history (5.2+) 的新版本，那么 History<S> 现在是 TypeScript 错误，因为 the History interface is no longer generic. This is a recent change 是在 history 5.2 版中发布的.0.

您可以通过将 connectRouter 函数调用的泛型类型参数显式设置为 unknown:

来修复错误

router: connectRouter<unknown>(history)

const store = configureStore({
  reducer: {
    [mockApi.reducerPath]: mockApi.reducer,
    router: connectRouter<unknown>(history)
  }
})

router reducer 的推断类型现在是 Reducer<RouterState<unknown>, AnyAction>。

正确配置 connected-react-router 和 Redux Toolkit Query 的 reducers

Configure reducers of connected-react-router and Redux Toolkit Query properly

reactjs

redux

connected-react-router

redux-reducers

redux-toolkit