Comment puis-je l'expédition à partir de composants enfants Réagissent Redux?
Mon serveur a un code comme ceci:
<ReactRedux.Provider store={store}><Layout defaultStore={JSON.stringify(store.getState())}/></ReactRedux.Provider>
<Layout>
a évidemment plus de composants qui nest plus.
J'ai une classe comme ceci profondeur:
import React from 'react';
export default React.createClass({
render: function(){
var classes = [
'js-select-product',
'pseudo-link'
];
if (this.props.selected) {
classes.push('bold');
}
return (
<li className="js-product-selection">
<span onClick={this.props.onClick} className={classes.join(' ')} data-product={this.props.id}>{this.props.name}</span>
</li>
);
}
});
Ce que je veux vraiment faire, plutôt que de this.props.onClick
est de distribuer un événement à définir l'état dans un réducteur de. J'ai eu quelques choses en ligne sur le contexte, mais j'ai reçu des critiques mitigées en tant que fonctionnalité a été ou n'allait pas loin.
MODIFIER
Je vois ce méthode de connexion mais j'aurais juré que j'avais lu de ne pas utiliser connect
chez les enfants de composants.
Vous devez vous connecter pour publier un commentaire.
Vous obtenez un trop pris sur les enfants des composants. Vous devez structurer votre application de sorte que vous avez les composants raccordés et non raccordés composants. Non connecté composants doivent être apatrides, les fonctions pures pour l'essentiel, que de prendre dans l'ensemble de leurs besoins par le biais d'accessoires. Les composants raccordés doivent utiliser le
connect
fonction de la carte redux état d'accessoires et de redux répartiteur pour les accessoires, et puis être responsable de la transmission de ces accessoires de composants enfants.Vous pourriez avoir beaucoup de composants connectés à une application, et beaucoup de non-composants connectés. Ce post (par le créateur de redux) décrit plus en détail, et parle de la non-connecté (muet) composants étant responsable de l'affichage de l'INTERFACE utilisateur, et connectée (smart), les composants étant responsable de la composition de non-composants connectés.
Un exemple pourrait être (à l'aide de quelques nouveaux syntaxe):
Dans cet exemple,
ImageList
est une composante connexe etImage
est un non-composant connecté.Il y avait des conseils à l'effet d'essayer de limiter les composants que vous vous connectez. Voir par exemple:
https://github.com/reactjs/redux/issues/419
https://github.com/reactjs/redux/issues/419#issuecomment-178850728
De toute façon, c'est vraiment plus utile pour la délégation d'une tranche de l'état d'un composant. Vous pouvez le faire que si elle fait sens pour votre situation, ou si vous ne voulez pas passer un rappel que les appels
dispatch()
vous pouvez passer au magasin ou envoi en bas de la hiérarchie, si vous le souhaitez.export default connect()(MyComponent)
et puis l'expédition à partir de là? Oublier tout ce que je me souviens de 6 mois en arrière? 🙂