Comment mélangez-vous componentDidMount () avec react-redux connect ()?
Cela semble être un cas d'utilisation simple, mais je ne peux pas le comprendre. Je souhaite afficher une liste des éléments récupérés d'une demande vers une API distante via HTTP. J'aimerais que l'écran s'affiche vide au début pendant que la demande est en cours, puis être rempli avec les résultats lorsqu'ils sont disponibles.
J'ai donc pensé que j'aurais deux composants: le composant "liste d'éléments" muet, et un composant "de présentation" encapsulé qui, euh, lance en quelque sorte la demande distante tout en rendant le composant stupide avec la liste d'éléments vide de l'état.
Je sais comment lancer une requête distante initiale: utilisez componentDidMount().
et je sais comment gérer la répartition/connexion: je veux utiliser quelque chose comme:
const OuterWrapper = connect(
mapStateToProps,
mapDispatchToProps
) (ItemList)
mais comment faire jouer ces choses ensemble? l'utilisation de connect() semble mettre les choses hors de portée. Je veux lancer la demande d'API de manière asynchrone, puis faire en quelque sorte un `dispatch (updateItemList (items)) pour dire au monde qu'il y a de nouveaux éléments à ajouter à l'état.
MODIFIER:
J'ai trouvé react-lifecycle-component , mais je ne comprends pas l'exemple d'utilisation, avant et après. Dans le cas le plus long, pourquoi getAllTehDatas est-il référencé deux fois? Pourquoi est-il dans mapDispatchToProps sans paire key:value? Pourquoi est-il nécessaire là-dedans si componentDidMount() l'appelle? Et que faites-vous si cette méthode doit utiliser dispatch()?
Tout d'abord, à propos de votre modification, le composant de ce dépôt est destiné à vous permettre de transmettre des fonctions au composant en tant qu'accessoires. Ceux-ci s'exécuteront chaque fois que les Méthodes de cycle de vie React seront exécutées. Ceci est utile pour des raisons. Mais ces raisons sont expliquées dans ce dépôt et ne sont pas pertinentes pour votre question.
Vous avez également vu ceci:
const mapDispatchToProps = { getAllTehDatas };
Il s'agit de la notation abrégée ES6. Cela signifie simplement:
const mapDispatchToProps = { getAllTehDatas: getAllTehDatas };
Autrement dit, le nom de la propriété est le même que le nom de la variable. Parce que c'est une opération si courante, quelqu'un d'intelligent est venu avec ce raccourci. Cela peut être très déroutant si vous ne le savez pas. Vous devriez lire sur es6 .
En avant.
Il existe un certain nombre de concepts qui ne sont pas clairement définis. Composants stupides. Composants intelligents. Composants de conteneur. Composants de présentation. Composants connectés. Composants fonctionnels purs. C'est beaucoup.
Les composants de conteneur sont des composants intelligents et les composants de présentation sont des composants stupides.
Parfois, les composants stupides sont un peu intelligents. Peut-être qu'ils ont une animation au passage de la souris. Ils peuvent même avoir un état.
Les composants fonctionnels purs ne sont qu'une fonction. Donc pas de méthodes et pas d'état. Cela ne signifie que des accessoires. Puisqu'il ne peut y avoir d'état ou de logique supplémentaire, les composants fonctionnels purs sont toujours de présentation.
Un composant connecté est un composant d'ordre supérieur. Il s'agit simplement d'un composant parent qui rend votre composant enfant. Il fait également un peu de magie pour optimiser le rendu.
Les composants de présentation ne doivent montrer que des choses mais pas faire des choses. Si des tâches sont effectuées lorsque vous cliquez dessus ou les saisissez, elles doivent être gérées par un parent, qui peut transmettre des gestionnaires au composant de présentation. Les composants de présentation sont autorisés à faire certaines choses, mais ces choses ne doivent rien influencer en dehors d'eux.
Les composants de conteneur sont censés déterminer ce qui se passe. C'est là que la logique est entassée. 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. Cela signifie que votre composant peut alors utiliser ces accessoires sans avoir à traiter davantage les données. Tous les traitements nécessaires peuvent être effectués dans mapStateToProps.
mapDispatchToProps peut faire tout ce qu'il faut pour passer des fonctions qui sont utilisées directement comme gestionnaires d'événements. Souvent, nous passons des créateurs d'actions liés, qui font généralement 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. Nous pouvons donc l'appeler onClick et passer la fonction que nous voulons. Vous pouvez également créer des créateurs d'actions complexes à l'aide de Redux-Thunk pour faire de n'importe quel gestionnaire d'événements un créateur d'action intelligent. Les créateurs d'actions thunked ont accès à la répartition et à l'état.
Les 2 paragraphes ci-dessus soulignent un point intéressant: le HOC créé par connect à l'aide de nos mapStateToProps et mapDispatchToProps peut facilement être transformé en un composant intelligent complet, et le wrapper Le composant peut être complètement présentationnel, même si le HOC résultant est de faire des choses intelligentes.
Ou obtenez ceci: vous pouvez connect un composant déjà connecté. Décoiffant, sûrement. Est-ce utile de le faire? Bien sûr que ça pourrait l'être. Un composant peut avoir besoin de données générales sur l'état où qu'il soit utilisé. Vous connect à ces données. Le composant résultant peut ensuite être connected à des données spécifiques à l'endroit où il est utilisé ailleurs. Commun? Non utile? Oui!
Vous pouvez également encapsuler un composant de présentation dans un composant conteneur qui est ensuite encapsulé avec connect. C'est peut-être ce que vous recherchez. Vous pouvez ensuite utiliser componentDidMount pour effectuer la récupération dans le composant conteneur.
Mais les composants de présentation ne sont utilement séparés de leur intelligence que pour 2 raisons:
- 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, pas componentWillMount. Ce dernier s'exécute également côté serveur, si vous utilisez des composants universels. Vous ne voulez pas que votre extraction s'exécute sur le serveur.
Notez que même si un composant connecté est clairement un wrapper, vous ne devriez pas y penser comme ça. Considérez-le comme une version branchée de l'original. L'habillage n'est qu'un détail d'implémentation. En outre, le wrapper est créé et maintenu par React-Redux et ses entrailles ne doivent pas être dérangées. Cela signifie que vous ne pouvez pas modifier le componentDidMount du wrapper, ou toute autre partie d'ailleurs. Et quand je dis que vous ne pouvez pas, je veux dire que vous pouvez totalement mais ne devriez vraiment pas.
Pour récapituler, je recommande de comprendre React, Redux et React-Redux. Ils vont bien ensemble, mais ce n'est pas la même chose.
Après avoir saisi les concepts, vous faites ce que vous pensez être le mieux. Faites vos propres règles.
Cette réponse que j'ai faite il y a quelque temps vous donne un exemple de la façon d'utiliser correctement connect et de lancer un appel d'action dans le composant. La seule différence est que c'est dans componentWillMount pour moi: P