Redux, Reaktion, Typoskript: Verbinden Sie kehrt ansehen Klasse, die Requisiten

Question

erfordert ich habe folgendes Beispiel:

import * as React from "react"; 
import { connect } from 'react-redux'; 


interface IMessage { 
    message : string; 
} 

class SayMessage extends React.Component<IMessage, {}>{ 
    render() { 
     return (<div>{this.props.message}</div>); 
    } 
} 


function mapStateToProps(state : any) : IMessage { 
    return { message : "Hello, world" }; 
} 
const SayMessageContainer = connect(mapStateToProps)(SayMessage); 

export class SomeOtherView extends React.Component<{},{}>{ 
    render(){ 
     return (<SayMessageContainer/>); 
    } 
} 

die auf <SayMessageContainer/> wirft:

Property 'message' wird in Typ fehlt ‚IntrinsicAttributes & IntrinsicClassAttributes & IMessage & {Kinder ?: ReactElement ... '.

Wie sollte dieses Beispiel geändert werden, damit Connect die Requisiten über mapStateToProps bereitstellen kann?

Hinweis/möglicher Hinweis: SayMessageContainer ist typeof SayMessage, was mir scheint.

Typoskript 2.0.0

bearbeiten

meine eigenen Container Schreiben scheint es zu lösen, aber ich würde lieber herausfinden, wie es richtig connect

class SayMessageContainer extends React.Component<{},{}>{ 
    render() { 
     const props = mapStateToProps({}); 
     return (
      <SayMessage {...props}/> 
     ); 
    } 
} 

mit zu tun Bearbeiten 2 Verwenden Sie die folgenden Typen:

"react-redux": "registry:npm/react-redux#4.4.0+20160614222153", 
"react-router": "registry:npm/react-router#2.4.0+20160628165748", 
"react-router-redux": "registry:npm/react-router-redux#4.0.0+20160602212457", 
"redux": "registry:npm/redux#3.0.6+20160214194820" 

Answer 1

Was ich tue ist Typ ownProps auf entweder mapStateToProps oder verbinden. Wenn Sie Requisiten hatte möchten Sie die Eltern schicken wie -

interface IMyOwnProps{ 
    thing1; 
    thing2; 
} 

dann können Sie Typoskript Figur, die aus durch verbinden Aufruf wie so helfen ...

const SayMessageContainer = connect<{}, {}, IMyOwnProps>(mapStateToProps)(SayMessage); 

Typing ownProps auf mapStateToProps auch ausreichend ist. In Ihrem Fall, da Sie keine Requisiten nicht haben, kann es ausreichend sein, um die folgenden zu tun, aber ich kann es nicht zur Zeit testen:

const SayMessageContainer = connect<{},{},{}>(mapStateToProps)(SayMessage); 

Answer 2

Sie haben eine Schnittstelle für jede Art zu schaffen, die Requisiten und gibt sie dann an die connect-Methode:

// Regular props 
interface OwnProps {} 

// Props from the mapStateToProps method 
interface StateProps { 
    message: string; 
} 

// Props from the mapDispatchToProps method 
interface DispatchProps {} 

Ihre Komponente zu erstellen, Sie eine bestimmte Art verwenden können:

type SayMessageProps = OwnProps & StateProps & DispatchProps; 

class SayMessage extends React.Component<SayMessageProps, {}>{ 
    render() { 
     return (<div>{this.props.message}</div>); 
    } 
} 

dann bei Verwendung verbinden:

connect<StateProps, DispatchProps, OwnProps>(mapStateToProps)(SayMessage); 

(Sie können auch mit {} statt leerer Schnittstellen)