ReactRedux.connect の mergeProps と型定義
2018-06-08 Fri.
ReactRedux の connect の型定義
型定義無しの場合は以下のように書く前提とする。
1export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);
型定義を付ける場合は Generics 記法で以下のように書く。
1export default connect<StateProps, DispatchProps, OwnProps>(2 mapStateProps,3 mapDispatchToProps4)(MyComponent);
この記法により、 mapStateToProps
DispatchProps
により生成される Props の型、 OwnProps
(<MyComponent />
に渡す Props) の型がそれぞれ定義されるため、Component 記述の際に渡される Props に対して型制約を付けることができる。
しかし mergeProps
を使用する場合、上記の型定義だと壊れてしまう。
mergeProps 使う場合の型定義
結論としては以下の通りになる。
type Props = StateProps & DispatchProps & OwnProps
である。
1export default connect<StateProps, DispatchProps, OwnProps, Props>(2 mapStateProps,3 mapDispatchToProps,4 mergeProps5)(MyComponent);
mergeProps で dispatch をする場合は以下になるかと思われる。
1export default connect<StateProps, {}, OwnProps, Props>(2 mapStateProps,3 (dispatch: Dispatch) => ({ dispatch }),4 mergeProps5)(MyComponent);
多くの解説では上記の 3 つまでしか触れられていないことが多いが、 connect の Generics 引数(?)は型定義を見ると 5 つまで取れることがわかる。
1export interface Connect {2 (): InferableComponentEnhancer<DispatchProp>;34 <TStateProps = {}, no_dispatch = {}, TOwnProps = {}, State = {}>(5 mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>6 ): InferableComponentEnhancerWithProps<TStateProps & DispatchProp, TOwnProps>;78 <no_state = {}, TDispatchProps = {}, TOwnProps = {}>(9 mapStateToProps: null | undefined,10 mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>11 ): InferableComponentEnhancerWithProps<TDispatchProps, TOwnProps>;1213 <TStateProps = {}, TDispatchProps = {}, TOwnProps = {}, State = {}>(14 mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>,15 mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>16 ): InferableComponentEnhancerWithProps<17 TStateProps & TDispatchProps,18 TOwnProps19 >;2021 <22 TStateProps = {},23 no_dispatch = {},24 TOwnProps = {},25 TMergedProps = {},26 State = {}27 >(28 mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>,29 mapDispatchToProps: null | undefined,30 mergeProps: MergeProps<TStateProps, undefined, TOwnProps, TMergedProps>31 ): InferableComponentEnhancerWithProps<TMergedProps, TOwnProps>;3233 <no_state = {}, TDispatchProps = {}, TOwnProps = {}, TMergedProps = {}>(34 mapStateToProps: null | undefined,35 mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>,36 mergeProps: MergeProps<undefined, TDispatchProps, TOwnProps, TMergedProps>37 ): InferableComponentEnhancerWithProps<TMergedProps, TOwnProps>;3839 <no_state = {}, no_dispatch = {}, TOwnProps = {}, TMergedProps = {}>(40 mapStateToProps: null | undefined,41 mapDispatchToProps: null | undefined,42 mergeProps: MergeProps<undefined, undefined, TOwnProps, TMergedProps>43 ): InferableComponentEnhancerWithProps<TMergedProps, TOwnProps>;4445 <46 TStateProps = {},47 TDispatchProps = {},48 TOwnProps = {},49 TMergedProps = {},50 State = {}51 >(52 mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>,53 mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>,54 mergeProps: MergeProps<TStateProps, TDispatchProps, TOwnProps, TMergedProps>55 ): InferableComponentEnhancerWithProps<TMergedProps, TOwnProps>;5657 <TStateProps = {}, no_dispatch = {}, TOwnProps = {}, State = {}>(58 mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>,59 mapDispatchToProps: null | undefined,60 mergeProps: null | undefined,61 options: Options<State, TStateProps, TOwnProps>62 ): InferableComponentEnhancerWithProps<DispatchProp & TStateProps, TOwnProps>;6364 <TStateProps = {}, TDispatchProps = {}, TOwnProps = {}>(65 mapStateToProps: null | undefined,66 mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>,67 mergeProps: null | undefined,68 options: Options<{}, TStateProps, TOwnProps>69 ): InferableComponentEnhancerWithProps<TDispatchProps, TOwnProps>;7071 <TStateProps = {}, TDispatchProps = {}, TOwnProps = {}, State = {}>(72 mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>,73 mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>,74 mergeProps: null | undefined,75 options: Options<State, TStateProps, TOwnProps>76 ): InferableComponentEnhancerWithProps<77 TStateProps & TDispatchProps,78 TOwnProps79 >;8081 <82 TStateProps = {},83 TDispatchProps = {},84 TOwnProps = {},85 TMergedProps = {},86 State = {}87 >(88 mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>,89 mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>,90 mergeProps: MergeProps<91 TStateProps,92 TDispatchProps,93 TOwnProps,94 TMergedProps95 >,96 options: Options<State, TStateProps, TOwnProps, TMergedProps>97 ): InferableComponentEnhancerWithProps<TMergedProps, TOwnProps>;98}
あまり mergeProps の型定義についてのドキュメントがないので、複雑だが型定義を読む方が早い。
オーバーライドしているので WebStorm でも型候補が出ないのが惜しいところである。
Pickup
Under Construction