connected-react-router

connected-react-router copied to clipboard

After upgrading connected-react-router from 6.2.2 -> 6.3.0+ starting to get the following typescript error when used in conjunction with dispatching the action via redux-observables. The error does not appear in 6.2.2.

Seems like it is having trouble resolving the push action with path and state vs. just location.

Error:

    Type 'CallHistoryMethodAction<[string, any?]>' is not assignable to type 'CallHistoryMethodAction<[LocationDescriptorObject<{}>]>'.
      Type '[string, any?]' is not assignable to type '[LocationDescriptorObject<{}>]'.
        Types of property '0' are incompatible.
          Type 'string' is not assignable to type 'LocationDescriptorObject<{}>'.

Usage:

const postContactRedirect: Epic<RootAction, RootAction, RootState> = (action$, state$) =>
  action$.pipe(
    filter(isActionOf(contactActions.contact.success)),
    withLatestFrom(state$),
    mergeMap(([_action, _state]) => {
      return of(routerActions.push('/contact/confirmation'));
    })
  );

Everything functionally seems to be working fine, so just seems to be a typescript issue. Tested with version 3.3.3 & 3.4.1 of typescript.

root-action.ts

import { ActionType } from 'typesafe-actions';

import { authenticationActions } from './authentication/actions';
import { routerActions } from 'connected-react-router';

const rootAction = {
  ...authenticationActions,
  ...routerActions
};

export type RootAction = ActionType<typeof rootAction>;

export { rootAction };

root-reducer.ts

import { combineReducers } from 'redux';
import { StateType } from 'typesafe-actions';
import { connectRouter } from 'connected-react-router';

import { authenticationReducer } from './authentication/reducer';
import { history } from './history';

const rootReducer = combineReducers({
  authentication: authenticationReducer,
  router: connectRouter(history)
});

export type RootState = StateType<typeof rootReducer>;

export { rootReducer };

@supasate - any thoughts on this?

Got same error but with typesafe-actions. If I comment out this line: https://github.com/supasate/connected-react-router/blob/6b8b94a6c4753f13dec19de3b4cb851ca7a7f30f/index.d.ts#L54 then the error gone...

So as a workaround, since I'm not using the second form of the actions, I copied the first type only and define my own types for the actions instead of using https://github.com/supasate/connected-react-router/blob/6b8b94a6c4753f13dec19de3b4cb851ca7a7f30f/index.d.ts#L77 directly.

type Push = (path: Path, state?: LocationState) => CallHistoryMethodAction<[Path, LocationState?]>;
// type Go, etc.

interface RouterActions {
  push: Push;
  // go: Go; etc.
}

export type RootAction = ActionType<typeof import('./root-action').default>|ActionType<RouterActions>;

I'm having similar issues with typesafe-actions and redux-observable.

@whitetrefoil Thank you very much for that workaround

Closing due to age of issue and newer versions of the libs involved.