React-Redux łączy problemy w maszynopisie

Question

Próbuję utworzyć komponent, który zostanie przekazany funkcji connect react-redux. Komponent jest w następujący sposób:

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) 

Powyższy kod wydaje się działać znaleźć gdybym tak jak czynią ConnectedComponent

<ConnectedComponent></ConnectedComponent> 

t j bez id podpory. Nie powinien on powodować błędu, ponieważ ConnectedComponent to po prostu połączona forma TestComponent i TestComponent powinna mieć podpory w postaci ITestProps. Czy tak powinno się zachowywać, czy robię coś złego.

Answer 1

Nie jestem pewien, dlaczego nie można wywnioskować typowania typ z samego składnika prezentacyjnej, ale to będzie działać, jeśli jest wpisany w ownProps connect ->

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

To również może wywnioskować, jeśli ownProps jest wpisany w mapDispatchToProps ->

mapStateToProps(state, ownProps: ITestProps) {} 

Answer 2

To jest prawidłowe zachowanie. Funkcja connect() zwróci nowy komponent kontenera, który otoczy Twój TestComponent jako dziecko.

Oto część kodu źródłowego

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

Ale można określić interfejs rekwizytów kontenera jak powiedział radio- (a także interfejsy StateProps i DispatchProps). można zobaczyć z definicji typu, który akceptuje TStateProps, TDispatchProps i TOwnProps i powróci 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>; 

Answer 3

Dołącz konstruktora wewnątrz klasy tak:

constructor(props) { 
    super(props) 
} 

bez konstruktora rekwizyty don” t ładowane

Zamiast

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

dodałem (oczywiście mapStateToProps & mapDispatchToProps muszą być zdefiniowane przed funkcji connect)

@connect(mapStateToProps, mapDispatchToProps) 

powyżej

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