Dans cet article, nous verrons comment envoyer des données entre les composants dans React à l'échelle mondiale, même dans différents onglets du navigateur.

Histoire

Imaginez que vous ayez une liste d'éléments, tels que des utilisateurs.

Chacun des utilisateurs peut être ouvert dans une fenêtre modale pour modification.

Vous n'avez aucun abonnement au backend, ce qui signifie que la liste des utilisateurs ne sera pas automatiquement synchronisée avec le backend si un utilisateur change.

Ainsi, une fois le profil d'un utilisateur mis à jour, vous souhaitez actualiser automatiquement la liste des utilisateurs sous la fenêtre modale (même dans tous les autres onglets de votre site Web).

Que ferons-nous pour synchroniser les données dans ces composants et onglets non liés ?

Solution

La fenêtre modale et la liste des utilisateurs doivent pouvoir échanger des événements et des données.

Ainsi, si une action est effectuée dans la fenêtre modale, l'événement doit être envoyé à tous les composants en attente de ce type d'action (par exemple la liste des utilisateurs), afin qu'ils puissent réagir à cet événement, par exemple en synchronisation des données.

Configurons une telle communication entre les composants "UserList" et "UserProfileModal" en utilisant un petit package use-app-events :

const UserProfileModal = () => {
  // retrieve a user ID from URL, for example
  const { userId } = useParams();

  // 1. Create an instance of useAppEvents
  const { notifyEventListeners } = useAppEvents();

  const submitUpdate = async () => {
    // send a request to BE here, await the response...

    // 2. Send an event containing the updated user ID to
    // all other components that are listening for it
    notifyEventListeners('user-update', userId);
  };

  return Save changes;
};

 ? Fenêtre modale

 ? La liste des utilisateurs

const UserList = () => {
  const [users, setUsers] = useState([]);

  // 1. Create an instance of useAppEvents
  const { listenForEvents } = useAppEvents();

  // 2. Listen and wait for the 'user-update' event to happen in the app
  listenForEvents('user-update', (userId) => {
    // 3. React to the occurred event by loading the refreshed
    // list of users from BE here...
  });

  return users.map((user) => (
    // render users here...
  ));
};

use-app-events est un petit package open source sans dépendances ni risques, il est également activement maintenu et sûr à utiliser.

À ce stade, la mise à jour du profil utilisateur dans UserProfileModal informera automatiquement tous les auditeurs comme UserList, ce qui déclenchera une actualisation de la liste des utilisateurs dans UserList, entraînant une meilleure UX.

Peu importe où UserList et UserProfileModal sont placés dans l'arborescence des composants, ils pourront toujours s'envoyer des données entre eux, même dans différents onglets du navigateur.

Conclusion

Si vous avez besoin de configurer sans effort une communication globale pour échanger des données entre les composants, utilisez le package use-app-events.

Il fournit une API facile à utiliser, une documentation complète et une saisie stricte pour vous garantir la meilleure expérience de développeur.