Comment mélanger componentDidMount () avec react-redux connect ()?

tout d'abord, à propos de votre édition, que le composant de ce repo est destiné à vous permettre de passer des fonctions au composant en tant qu'accessoires. Celles-ci seront exécutées à chaque fois que les méthodes React lifecycle methods sont exécutées. Ceci est utile pour des raisons. Mais ces raisons sont expliquées dans ce rapport et ne sont pas pertinentes à votre question.

aussi, vous avez vu cela:

const mapDispatchToProps = { getAllTehDatas };

ici ES6 shorthand notation. Ça veut juste dire:

const mapDispatchToProps = { getAllTehDatas: getAllTehDatas };

, C'est le nom de la propriété est le même que le nom de la variable. Parce que c'est une opération courante, quelqu'un d'intelligent est venu avec ce raccourci. Il peut être très déroutant si vous ne savez pas à ce sujet. Vous devez lire à propos de es6 .

à partir.

il existe un certain nombre de concepts qui ne sont pas bien définis. Muet composants. Smart components. Composants du conteneur. Présentation composant. Composants connectés. Composants purement fonctionnels. C'est beaucoup.

Conteneur de composants sont smart composants et de présentation des composants sont dumb composants.

parfois, les composants muets sont un peu intelligents. Peut-être qu'ils ont une animation sur mouse over. Ils peuvent même avoir l'état.

composants purement fonctionnels sont juste une fonction. Donc pas de méthodes et aucun état. Cela signifie que seuls les accessoires. Comme il ne peut pas y avoir d'état ou de logique supplémentaire, les composants purement fonctionnels sont toujours présents.

un composant connecté est un composant D'ordre supérieur. C'est juste un composant parent qui rend votre composant comme un enfant. Il fait aussi un peu de magie pour optimiser le rendu.

les éléments de présentation ne doivent montrer que des choses mais ne pas faire des choses. Si des choses se fait lorsque vous cliquez ou tapez dans eux, il devrait être géré par un parent, qui peut passer les gestionnaires à la composante de présentation. Les éléments de présentation sont autorisés à faire certaines choses, mais ces choses ne doivent pas influencer quoi que ce soit en dehors d'eux.

Les composants du conteneur

sont censés déterminer ce qui se passe. C'est où la logique obtient entassés dans des. C'est plus un concept React qu'un concept Redux.

les composants connectés sont créés avec connect . Quand c'est appelé, nous passons quelques fonctions. mapStateToProps et mapDispatchToProps .

mapStateToProps peut faire tout ce dont il a besoin pour générer des accessoires pour votre composant à utiliser. Cela signifie que votre composant peut alors utiliser ces accessoires sans avoir à traiter les données plus avant. Tout le traitement nécessaire peut être fait dans mapStateToProps .

mapDispatchToProps peut faire tout ce qu'il doit faire pour passer les fonctions qui sont utilisées directement comme gestionnaires d'événements. Souvent nous passons l'action liée les créateurs, qui, habituellement, font déjà tout ce que le gestionnaire doit faire de toute façon. Mais nous pouvons passer n'importe quelle fonction et lui donner n'importe quel nom. Donc nous pouvons l'appeler onClick et passer n'importe quelle fonction que nous aimons. Vous pouvez également créer des créateurs d'action Complexes avec L'aide de Redux-Thunk pour transformer n'importe quel gestionnaire d'événement en un créateur d'action intelligent. Les créateurs d'actions Thunked ont accès à la distribution et à l'état.

les deux paragraphes ci-dessus soulignent un point intéressant: le HOC créé par connect avec l'aide de nos mapStateToProps et mapDispatchToProps peut facilement être transformé en un composant intelligent complet, et le composant enveloppé peut être complètement présentationnel, même si le résultat HOC est de faire des choses intelligentes.

ou obtenez ceci: vous pouvez connect un composant déjà connecté. Époustouflant, sûrement. Est-il utile de le faire? Bien sûr, il pourrait être. Un composant peut avoir besoin de quelques données générales de l'état où qu'il soit utilisé. Vous connect il à ces données. Le le composant résultant peut alors être connect ed à des données spécifiques à l'endroit où il est utilisé ailleurs. Commun? Aucun. Utile? Oui!

vous pouvez également envelopper un composant de présentation dans un composant de conteneur qui est ensuite enveloppé avec connect . Cela pourrait être ce que vous cherchez. Vous pouvez alors utiliser componentDidMount pour faire le fetch dans le composant container.

mais les composants de présentation ne sont utilement séparés de leur intelligence que pour 2 motifs:

• réutilisabilité
• testabilité

si vous n'avez besoin ni de l'un ni de l'autre, vous ne devez pas séparer les deux. Pourquoi compliquer les choses sans gain?

utilisez également componentDidMount , et non componentWillMount . Ce dernier fonctionne également côté serveur, si vous utilisez des composants universels. Vous ne voulez pas que votre fetch s'exécute sur le serveur.

notez que même si un composant est clairement une enveloppe, il ne faut pas penser comme ça. Vois ça comme une version branchée de l'original. L'emballage est juste un détail d'implémentation. De plus, L'emballage est créé et maintenu par React-Redux et ses intestins ne doivent pas être dérangés. Cela signifie que vous ne pouvez pas changer le componentDidMount de l'emballage, ou toute autre partie pour cette matière. Et quand je dis que tu ne peux pas, je veux dire que tu peux totalement, mais tu ne devrais pas.

pour récapituler, Je il est recommandé de comprendre React, Redux et React-Redux. Ils vont bien ensemble, mais ne sont pas la même chose.

après avoir saisi les concepts, vous faites simplement ce que vous pensez être le mieux. Faire vos propres règles.