2016-07-07 46 views
9

私はreact-reduxのconnect関数に渡されるコンポーネントを作成しようとしています。 コンポーネントは次のとおりです。タイプ・スクリプトのReact-Redux接続の問題

interface ITestProps { 
    id: number 
} 

class TestComponent extends React.Component<ITestProps, {}> { 
    render() { 
    return (<div> 
     {this.props.name} 
    </div>) 
    } 
} 

mapStateToProps(state) {} 
mapDispatchToProps(dispatch) {} 

let ConnectedComponent = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(TestComponent) 

上記のコードは、私がid小道具なしでそう

<ConnectedComponent></ConnectedComponent> 

すなわちようConnectedComponentをレンダリングする場合は見つける動作しているようです。 ConnectedComponentは単にTestComponentという接続形式であり、TestComponentの形式はITestPropsという形式のプロンプトを持つ必要があるため、エラーは発生しません。 これは動作するかどうか、または何か間違っているかどうかです。

+0

ない活字に精通上記

@connect(mapStateToProps, mapDispatchToProps) 

を追加しましたが、なぜあなたは別の名前(ConnectedComponent)が必要ですか?あなたは 'export default connect(mapStateToProps、mapDispatchToProps)(TestComponent);'と ''のような何かを行うことはできませんか? –

+0

それは私がやっていることです..私はちょうどそれが理解しやすいだろうと思った –

+1

こんにちは、あなたはどのような定義の種類は、あなたのredux反応のために使用していますか? – AlexG

答えて

16

私はタイピングが一人でプレゼンテーションコンポーネントから型を推論することはできませんなぜわからないんだけど、ownPropsは、接続で入力された場合、それは動作します - >

let ConnectedComponent = connect<{}, {}, ITestProps>(
    mapStateToProps, 
    mapDispatchToProps 
)(TestComponent) 

ownProps場合、それはまたそれを推測することができますが入力されましたmapDispatchToProps - >

mapStateToProps(state, ownProps: ITestProps) {} 
0

これは正しい動作です。 connect()はTestComponentを子としてラップする新しいコンテナコンポーネントを返します。ここで

は、ソースコード

class Connect extends Component { 
... 
    render() { 
     const selector = this.selector 
     selector.shouldComponentUpdate = false 

     if (selector.error) { 
      throw selector.error 
     } else { 
      return createElement(WrappedComponent, 
       this.addExtraProps(selector.props)) 
     } 
    } 
... 
} 

の一部です。しかし、あなたは、放射性で言ったように、コンテナの小道具のインターフェイスを指定(してもStatePropsとDispatchPropsのインタフェース)することができます。小道具ドン」コンストラクタがなければ

constructor(props) { 
    super(props) 
} 

:あなたはこのようなクラス内のコンストラクタを含めるTStateProps、TDispatchPropsとTOwnPropsを受け入れるタイプの定義から見ることができる、とComponentDecorator

export declare function connect<TStateProps, TDispatchProps, TOwnProps>(
    mapStateToProps?: MapStateToProps<TStateProps, TOwnProps> | MapStateToPropsFactory<TStateProps, TOwnProps>, 
    mapDispatchToProps?: MapDispatchToProps<TDispatchProps, TOwnProps> | MapDispatchToPropsFactory<TDispatchProps, TOwnProps>, 
    mergeProps?: MergeProps<TStateProps, TDispatchProps, TOwnProps>, 
    options?: Options 
): ComponentDecorator<TStateProps & TDispatchProps, TOwnProps>; 
-1

を返します トン代わり

let ConnectedComponent = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(TestComponent) 

をロードされます

私は(明らかにmapStateToProps & mapDispatchToPropsはconnect関数の前に定義する必要が)

class TestComponent extends React.Component<ITestProps, {}> {