Types problem whit connected-react-router

[11ume]

The types do not work with react router connect, because the router reducer, returns a different data type, what is the best way to resolve this conflict?

import { createBrowserHistory, History } from 'history'
import { connectRouter } from 'connected-react-router'
import { configureStore } from '@reduxjs/toolkit'

const rootReducer = (history: History) => ({
    router: connectRouter(history)
})

const history = createBrowserHistory()

const store = configureStore({
    reducer: rootReducer(history) // type error
})

export default store
`

> error emited
Types of parameters 'action' and 'action' are incompatible.
Type 'AnyAction' is not assignable to type 'LocationChangeAction<PoorMansUnknown>'.

[lkostrowski]

Same here, I'm trying to solve it for a long time but didn't figure out anything :/

[11ume]

@lkostrowski Hi, I solved this problem, but not elegantly, it was a recommendation from the creator of redux-toolkit.
Another solution might be to clone the connected-react-router type repository and solve the problem the right way, but I don't have time for make it.

My provisional solution is the next.
Note: I am using redux-toolkit.

import { Reducer } from 'redux'
import { History, LocationState } from 'history'
import { connectRouter, RouterState } from 'connected-react-router'
import counter from 'features/couter'

const createRootReducer = (history: History) => ({
    router: connectRouter(history) as Reducer<RouterState<LocationState>>
    , counter
})

export default createRootReducer
`

[lkostrowski]

Thanks, it works. Its not that bad if you keep this hack in one place.
It still cause some problems with typing actions, but nothing I can't live with.

[matinrco]

I know it's a little late, but for those who end up here:

In latest version of connected-react-router, reducer type problem is solved (#431 I think), but I had problems while dispatching thunk actions with broken types caused by incorrect connected-react-router middleware setup with toolkit.
I used cra-template-redux-typescript and this is what I did:

import { configureStore } from "@reduxjs/toolkit";
import { combineReducers } from "redux";
import { routerMiddleware, connectRouter } from "connected-react-router";
import { createBrowserHistory } from "history";
....

const browserHistory= createBrowserHistory()

const rootReducer = combineReducers({
    router: connectRouter(browserHistory),
    counter: counterReducer,
});

const store = configureStore({
    reducer: rootReducer,
    middleware: (getDefaultMiddleware) => [
        ...getDefaultMiddleware(),
        routerMiddleware(browserHistory),
    ],
});

the point is that to use callback function with getDefaultMiddleware instead of array to setup middlewares according to docs here, and now everything works perfectly 👌

[leosuncin]

I've found an error with strict: true:

import { Action, ThunkAction, configureStore } from '@reduxjs/toolkit';

import { connectRouter, routerMiddleware } from 'connected-react-router';
import { History, createBrowserHistory } from 'history';

import authReducer from './slices/authSlice';
import cartReducer from './slices/cartSlice';

export const browserHistory = createBrowserHistory();

export function makeStore(history: History = browserHistory) {
  return configureStore({
    reducer: {
      cart: cartReducer,
      auth: authReducer,
      router: connectRouter(history),
    },
    middleware: (getDefaultMiddleware) => [
      ...getDefaultMiddleware(),
      routerMiddleware(history),
    ],
  });
}

const store = makeStore();


export type AppState = ReturnType<typeof store.getState>;

export type AppDispatch = typeof store.dispatch;

export type AppThunk<ReturnType = void> = ThunkAction<
  ReturnType,
  AppState,
  unknown,
  Action<string>
>;

export default store;

I got the next error

src/app/store.ts:19:7 - error TS2322: Type 'Reducer, AnyAction>' is not assignable to type 'Reducer'.
  Types of parameters 'state' and 'state' are incompatible.
    Type 'unknown' is not assignable to type 'RouterState | undefined'.
      Type 'unknown' is not assignable to type 'RouterState'.

19       router: connectRouter(history),
         ~~~~~~


Found 1 error.

With [email protected] and @reduxjs/[email protected]

[ksjogo]

Also ran into that with strict turned on.

[JacekKosciesza]

For me something like that worked:

router: connectRouter<LocationState>(browserHistory)

full example:

import { configureStore } from "@reduxjs/toolkit";
import { connectRouter, routerMiddleware } from "connected-react-router";
import { createBrowserHistory, LocationState } from "history";

export const browserHistory = createBrowserHistory();

export const store = configureStore({
  reducer: {
    router: connectRouter<LocationState>(browserHistory),
    // ...
  },
  middleware: (getDefaultMiddleware) => [
    ...getDefaultMiddleware(),
    routerMiddleware(browserHistory),
  ],
});