reactjs - React Redux Connect DefaultRootState-typning

Jag uppgraderar till de senaste versionerna av TypeScript/React/Redux och jag sitter fast med ett kompilatorfel vid en connect-funktion i React Redux:

Jag skrev min rootReducer med följande som tillhandahålls av dokumentationen för react redux :

export type RootState = ReturnType<typeof rootReducer>

Typen av RootState som infereras av TypeScript är:

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

Connect-funktionen är denna:

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) => {
        ...

Och felet är:

  /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

Svar #1

Jag har hittat detta kodexempel:

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

Den sista template-parametern för connect är RootState, typen av rotstatet. Så lösningen var att korrekt parametrisera connect.

Tidigare kommentar lämnad här för arkeologer:

Det här vill vara en kommentar. Jag la den här bara på grund av formateringen:

Jag har hittat detta i 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 {}

Relaterade artiklar