2016-07-07 40 views
9

Sto tentando di creare un componente che viene passato alla funzione connect di react-redux. Il componente è la seguente:React-Redux collega i problemi in typescript

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) 

Il codice di cui sopra sembra funzionare trovare se mi rendo ConnectedComponent in questo modo

<ConnectedComponent></ConnectedComponent> 

cioè senza il puntello id. Non dovrebbe generare un errore poiché lo ConnectedComponent è semplicemente il modulo collegato di TestComponent e TestComponent dovrebbe avere oggetti di scena del modulo ITestProps. È così che si dovrebbe comportare o sto facendo qualcosa di sbagliato.

+0

familiarità con dattiloscritto, ma perché avete bisogno di un nome diverso (ConnectedComponent)? Non puoi fare qualcosa come 'export default connect (mapStateToProps, mapDispatchToProps) (TestComponent);' e quindi ''? –

+0

Ecco come faccio .. Ho pensato solo in questo modo sarebbe stato più facile capire –

+1

Ciao, quali tipi di definizione stai usando per redux-react? – AlexG

risposta

16

io non sono sicuro perché le tipizzazioni non possono dedurre il tipo dal componente di presentazione da sola, ma funzionerà se ownProps viene digitato in Connect ->

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

Anche può dedurre se ownProps è digitato in mapDispatchToProps ->

mapStateToProps(state, ownProps: ITestProps) {} 
0

Questo è il comportamento corretto. connect() restituirà un nuovo componente contenitore che avvolge TestComponent da bambino.

Ecco parte del codice sorgente di

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)) 
     } 
    } 
... 
} 

ma è possibile specificare l'interfaccia di puntelli del contenitore come detto da Radio- (e anche le interfacce di StateProps e DispatchProps). Si può vedere dalla definizione del tipo che accetta TStateProps, TDispatchProps e TOwnProps, e tornerà 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

Includere un costruttore all'interno della classe in questo modo:

constructor(props) { 
    super(props) 
} 

Senza il costruttore gli oggetti di scena don' t ottenere caricato

Invece di

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

ho aggiunto (ovviamente mapStateToProps & mapDispatchToProps devono essere definiti prima che la funzione di connessione)

@connect(mapStateToProps, mapDispatchToProps) 

sopra

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