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

Question

I am trying to setup reducers of both connected-react-router and RTK Query.
(The old code base has connected-react-router already)
Then I received this error.

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>'.

My "mockApi" is quite simple. "orderApi" is somewhat the same.

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, }

While using combineReducers produces no type error,

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

but I lose the type of the store.
Knowing the type of the store is a huge advantage in development, so I'm trying to figure out how to solve the error.

May I know if I'm wrong somewhere?

score 1 · Answer 1 · answered Feb 13 '22 at 16:02

1

Seems like you can use Type Assertions here.
https://github.com/supasate/connected-react-router/issues/195

router: connectRouter(history) as Reducer,

answered Feb 13 '22 at 16:02

Hung P.T.

101
8

`as Reducer` is kind of garbage because it doesn't contain any state type. It should be `as Reducer` or something. I've used these two packages together before without issue (until I finally got rid of connected-react-router). I will check my code and leave an answer. – Linda Paiste Feb 13 '22 at 23:17

score 1 · Accepted Answer · answered Feb 13 '22 at 23:47

This TypeScript error occurs when using connected-react-router with newer versions of history and react-router.

The type for the connectRouter function looks like this:

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

(source)

You can see that it is a generic function where the generic type parameter S refers to the type of the state that is stored in your history.

If you have a new version of history (5.2+), then History<S> is now a TypeScript error because the History interface is no longer generic. This is a recent change which was released in history version 5.2.0.

You can fix the error by explicitly setting the generic type parameter for the connectRouter function call to unknown:

router: connectRouter<unknown>(history)

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

The inferred type of the router reducer is now Reducer<RouterState<unknown>, AnyAction>.

Now that I take another look at it, indeed every reducer "goes" with a state it operates on. — Hung P.T., Feb 16 '22 at 15:13

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

2 Answers2