React Redux Connect DefaultRootState typing

Question

我正在升级到typescript/areact/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 {}