Réagir: comment remonter un composant frère pour réexécuter componentDidMount?

Question

Dans mon application, un utilisateur a plusieurs .. disons «chiens». Le chien actuellement sélectionné apparaît dans l'en-tête et peut être modifié via le menu déroulant de l'en-tête. Lors de la sélection de leur nouveau chien, il marque primary: true sur le backend, et je fais la mise à jour de l'interface utilisateur en-tête correspondant. A partir de ce moment, toutes les requêtes vers le backend retournent les résultats pour le chien primary.

J'ai une composante Layout.jsx qui ressemble à ceci:

<Header /> 
<div> 
    {this.props.children} 
</div> 

En this.props.children, je rends une page d'index pour plusieurs ressources différentes, à savoir un exemple d'un composant enfant pourrait être TreatsContainer où une demande de réseau est en componentDidMount à /treats, et les résultats sont rendus dans ma mise en page. Le problème auquel je suis confronté est que lorsqu'un utilisateur change son chien dans le composant d'en-tête, je voudrais que les autres composants réexécutent la même demande de réseau qu'ils font en componentDidMount, de sorte que le chien nouvellement sélectionné les données sont affichées. J'ai Redux implémenté dans quelques endroits dans l'application, mais je ne voudrais pas stocker toutes les données dans l'arbre d'état global, car il n'y a aucune limite au nombre de ressources que l'utilisateur peut créer. Ce que je veux dire par là, c'est que je ne veux pas toutes les données de /treats, /toys, /foods, etc. dans un groupe de tableaux. Quelle serait une bonne approche pour gérer cette situation?

Answer 1

Je ne suis pas sûr de bien comprendre votre question, mais j'essaierai quand même d'y répondre au mieux de mes capacités. D'après ce que j'ai compris, vous avez un composant Header qui définit le primary dog. Et vous voulez que votre composant enfant obtienne de nouvelles données du backend lorsque ce primary dog est modifié.

La façon dont je parvenir est

1. magasin le primary dog dans le magasin Redux courant et le feu d'une action dans votre composant Header quand il change, mettre à jour.
2. De chaque composant enfant, accéder au primary dog du magasin comme accessoires en utilisant mapStateToProps
3. Dans chaque composant enfant, faire un appel au back-end pour récupérer les données pertinentes componentWillReceiveProps lorsque this.props.primaryDog != nextProps.primaryDog

Answer 2

Je suis d'accord avec @ l'approche suggérée par palsrealm, mais voici une alternative si vous utilisez react-router:

Mettez Id du primary dog dans l'URL,

<Route path="/:dogId" component={DogIndex} /> 

puis lorsque l'utilisateur sélectionne un chien primaire, vous pouvez l'acheminer vers la page d'index.

<Link to=`/${selectedDogId}` /> 

Ensuite, votre composant (DogIndex) va monter et componentDidMount se déclenche.