Les problèmes de connexion React-Redux en caractères typographiques
je suis un essai de faire un composant qui passe pour la fonction connect de react-redux.
La composante est la suivante:
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)
le code ci-dessus semble fonctionner trouver si je rends ConnectedComponent comme si
<ConnectedComponent></ConnectedComponent>
I. e sans le id prop. Ne devrait-il pas jeter une erreur puisque le ConnectedComponent est simplement la forme jointe de TestComponent et TestComponent devrait avoir des accessoires de la forme ITestProps .
Est-ce comment il est censé se comporter ou je fais quelque chose de mal.
3 réponses
Je ne suis pas sûr pourquoi les typographies ne peuvent pas inférer le type à partir du seul composant de présentation, mais il fonctionnera si ownProps est typé dans connect - >
let ConnectedComponent = connect<{}, {}, ITestProps>(
mapStateToProps,
mapDispatchToProps
)(TestComponent)
il peut aussi le déduire si ses propres gouttes sont dactylographiées dans mapDispatchToProps - >
mapStateToProps(state, ownProps: ITestProps) {}
c'est le comportement correct. connect () renverra un nouveau container component qui enveloppera votre TestComponent comme un enfant.
Voici une partie du code source
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))
}
}
...
}
mais vous pouvez spécifier l'interface des accessoires du conteneur comme dit par Radio - (et aussi les interfaces de Staeprops et DispatchProps). Vous pouvez voir de la définition de type qui accepte TStateProps, TDispatchProps et TOwnProps, et retournera 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>;
inclut un constructeur à l'intérieur de la classe comme ceci:
constructor(props) {
super(props)
}
sans le constructeur les accessoires ne se chargent pas
au lieu de
let ConnectedComponent = connect(
mapStateToProps,
mapDispatchToProps
)(TestComponent)
j'ai ajouté (évidemment mapStateToProps & mapDispatchToProps doivent être définis avant la fonction connect)
@connect(mapStateToProps, mapDispatchToProps)
ci-dessus
class TestComponent extends React.Component<ITestProps, {}> {