React Redux Connect DefaultRootState typing

Question

I am upgrading to last versions of typescript / react / redux and I'm stuck at a compiler error at a connect function of react redux :

I typed my rootReducer with the following provided by the documentation of react redux :

export type RootState = ReturnType<typeof rootReducer>

The type of RootState infered by typescript is :

const rootReducer: Reducer<CombinedState<{
    authedUser: User | null;
    loading: LoadingState;
    errors: ErrorState;
    ui: UiState;
    entities: EntitiesState;
    shoppingCart: ShoppingCart;
    router: RouterState<...>;
}>, AnyAction>

The connect function is this :

export default withRouter(
connect<MyStateProps, MyDispatchProps, MyOwnProps>(
    ({ authedUser, entities, router }: StoreState): MyStateProps => ({
        authedUser,
        currentCinema: getCurrentCinema(entities.cinemas),
        router
    }),
    (dispatch) => ({ dispatch })
)(
    ({ authedUser, currentCinema, router, history }: Props) => {
        ...

And the error is :

  /Users/cyprien/projets/vad2/src/components/App/App.tsx
  TypeScript error in /Users/cyprien/projets/vad2/src/components/App/App.tsx(69,9):
  No overload matches this call.

  The last overload gave the following error.
  Argument of type '({ authedUser, entities, router }: CombinedState<{ authedUser: User | null; loading: LoadingState; errors: ErrorState; ui: UiState; entities: EntitiesState; shoppingCart: ShoppingCart; router: RouterState<...>; }>) => MyStateProps' is not assignable to parameter of type 'MapStateToPropsParam<MyStateProps, MyOwnProps, DefaultRootState>'.

  Type '({ authedUser, entities, router }: CombinedState<{ authedUser: User | null; loading: LoadingState; errors: ErrorState; ui: UiState; entities: EntitiesState; shoppingCart: ShoppingCart; router: RouterState<...>; }>) => MyStateProps' is not assignable to type 'MapStateToPropsFactory<MyStateProps, MyOwnProps, DefaultRootState>'.

    Types of parameters '__0' and 'initialState' are incompatible.
      Type 'DefaultRootState' is not assignable to type 'CombinedState<{ authedUser: User | null; loading: LoadingState; errors: ErrorState; ui: UiState; entities: EntitiesState; shoppingCart: ShoppingCart; router: RouterState<...>; }>'.

        Type 'DefaultRootState' is missing the following properties from type '{ authedUser: User | null; loading: LoadingState; errors: ErrorState; ui: UiState; entities: EntitiesState; shoppingCart: ShoppingCart; router: RouterState<...>; }': authedUser, loading, errors, ui, and 3 more.  TS2769

67 | export default withRouter(
68 |     connect<MyStateProps, MyDispatchProps, MyOwnProps>(
69 |         ({ authedUser, entities, router }: StoreState): MyStateProps => ({
   |         ^
70 |             authedUser,
71 |             currentCinema: getCurrentCinema(entities.cinemas),
72 |             router

Answer 1

I have found this code example:

connect<
  ReturnType<typeof mapStateToProps>,
  typeof dispatchProps, // use "undefined" if NOT using dispatchProps
  Diff<BaseProps, InjectedProps>,
  RootState
>(
mapStateToProps,
dispatchProps
)(Hoc);

The last template parameter of connect is RootState, the type of the root state. So the solution was to correctly parametrize the connect.

Earlier comment left here for archeologists:

This wants to be a comment. I put it here just because the formatting:

I have found this in index.d.ts:

/**
 * This interface can be augmented by users to add default types for the root state when
 * using `react-redux`.
 * Use module augmentation to append your own type definition in a your_custom_type.d.ts file.
 * https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation
 */
// tslint:disable-next-line:no-empty-interface
export interface DefaultRootState {}