web-dev-qa-db-fra.com

Comment créer un état partagé entre deux composants réactifs?

J'ai 2 composants react qui doivent partager un état, react-router affiche le composant A, qui prend quelques entrées et l'ajoute à son état, après que l'état a été mis à jour avec succès, je veux rediriger vers le composant B, où l'utilisateur ajoute quelques entrées supplémentaires et met à jour le même état que le composant A pour créer un objet avec des entrées de A et B avant de soumettre une demande de publication à mon API pour enregistrer les données des composants A et B. Comment puis-je y parvenir, existe-t-il un moyen d'utiliser react-router, ou dois-je configurer une relation parent/enfant entre les composants?

javascriptreactjsreact-router
26
Jack

Ce que vous voulez, c'est implémenter un objet qui stocke votre état, qui peut être modifié à l'aide des fonctions de rappel. Vous pouvez ensuite transmettre ces fonctions à vos composants React.

Par exemple, vous pouvez créer un magasin:

function Store(initialState = {}) {
  this.state = initialState;
}
Store.prototype.mergeState = function(partialState) {
  Object.assign(this.state, partialState);
};

var myStore = new Store();

ReactDOM.render(
  <FirstComponent mergeState={myStore.mergeState.bind(myStore)} />,
  firstElement
  );
ReactDOM.render(
  <SecondComponent mergeState={myStore.mergeState.bind(myStore)} />,
  secondElement
  );

Désormais, les instances FirstComponent et SecondComponent peuvent appeler this.props.mergeState({ . . .}) pour affecter l'état au même magasin.

Je laisse Store.prototype.getState Comme exercice au lecteur.

Notez que vous pouvez toujours passer le magasin (myStore) lui-même aux composants; c'est juste moins réactif de le faire.

Voici une documentation supplémentaire qui pourrait être intéressante:

React Docs: "Communiquer entre les composants"

Pour la communication entre deux composants qui n'ont pas de relation parent-enfant, vous pouvez configurer votre propre système d'événements global. Abonnez-vous aux événements dans componentDidMount (), désabonnez-vous dans componentWillUnmount () et appelez setState () lorsque vous recevez un événement. Le modèle de flux est l'un des moyens possibles pour organiser cela.

12
A. Vidor

Le type de dépendance entre les composants définira la meilleure approche.

Par exemple, redux est une excellente option si vous prévoyez d'avoir un magasin central. Cependant, d'autres approches sont possibles:

  • Parent à enfant

    1. Accessoires
    2. Méthodes d'instance

  • De l'enfant au parent

    1. Fonctions de rappel
    2. Événement bouillonnant

  • Frère à frère

    1. Composant parent

  • De tout à tout

    1. Modèle d'observateur
    2. Variables globales
    3. Le contexte

Veuillez trouver plus des informations détaillées sur chacune des approches ici

8
Custodio

Soit vous pouvez configurer une relation parent-enfant, puis vous pouvez transmettre des données aux composants enfants comme accessoires.

Sinon, si vous souhaitez créer une interaction entre 2 composants qui ne sont pas liés à l'un ou l'autre (parent/enfant), vous pouvez soit vérifier flux ou encore mieux redux .

Je dirais que vous devriez aller avec redux . Voir ici pourquoi

1
Harkirat Saluja