Reat - Composants/Contenants : Une vue, des actions multiples ?

Question

Je vais essayer d'être concis : J'ai une vue de filtre (conteneur) qui combine des composants muets comme un composant de grille avec des résultats, et un composant de formulaire avec quelques champs et actions comme submit. Dans ce contexte qui abrite quelques doutes : - Dans le cas où j'ai un composant (une liste déroulante par exemple) qui a ses propres données (une liste de quelque chose), doit-il être responsable de la récupération de ses propres données ou cela doit-il être délégué à son parent intelligent (vue filtre) ? - Cette vue filtre intelligente a de nombreux composants muets à prendre en charge, donc, est-elle responsable de la propagation de toutes les actions que ces composants ont besoin (par exemple : handleSearchClick, handleGridRowClick, etc.) ?

Si c'est le cas, cela devrait être la structure finale :

• FilterView (intelligent)
  • Formulaire (muet, avec des actions de rappel reçues de FilterView)
    • TextField (muet)
    • CustomerDropDown (intelligent ? ou FilterView doit-il lui envoyer des données ?)
  • Grille (muette, avec des actions de rappel reçues de FilterView)

J'espère avoir bien expliqué ce que je voulais dire.

Merci d'avance.

Answer 1

Les questions duveteuses obtiennent des réponses duveteuses.

Il n'y a pas de véritable consensus sur la façon de trouver le point idéal pour les composants intelligents/de décharge. Il y a une tonne d'articles de blog à ce sujet et même la documentation de React est floue sur ce concept. En supposant que vous utilisez quelque chose comme Redux, je dirais, n'ayez pas peur de connecter vos composants "plus profonds". Essayez d'obtenir un code plus simple et plus propre qui a du sens à regarder et à raisonner plutôt que de suivre une science exacte.

Dans le cadre de mon projet actuel, alors que nous suivions auparavant la méthode consistant à "transmettre toutes les données du haut vers le bas", nous sommes désormais passés à la connexion directe des composants inférieurs aux magasins et aux actions qui en ont besoin. C'est beaucoup mieux et cela fonctionne très bien pour nous. Notre problème et la raison pour laquelle nous avons changé de méthode sont bien décrits par d'autres personnes dans la section Utilisation recommandée de connect() dans le repo de Redux.

Avec Redux et son composant connect, il n'y a pas de coût réel pour se connecter à l'état plus souvent, donc fondamentalement, tout dépend de vous et de votre héritage.

Même si vous n'utilisez pas Redux, je suis sûr que ces articles de blog et ces problèmes peuvent vous aider.

Bons conseils de lecture : Utilisation recommandée de connect() #419

L'article de blog d'Abramov sur les composants intelligents et stupides