reactjs - React Redux Connect DefaultRootState 类型

Question

我正在升级到最新版本的 typescript/react/redux，但在 react redux 的连接函数中遇到编译器错误:

我使用 react redux 文档提供的以下内容输入我的 rootReducer :

export type RootState = ReturnType<typeof rootReducer>

typescript 推断出的 RootState 类型是:

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

连接功能是这样的:

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

错误是:

  /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

我找到了这个代码示例:

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

connect的最后一个模板参数是RootState ，根状态的类型。所以解决方案是正确参数化连接。
早期的评论留给考古学家:
这要成为评论。我把它放在这里只是因为格式:
我在 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 {}