En este artículo veremos cómo enviar datos entre componentes en React globalmente, incluso en diferentes pestañas del navegador.

Historia

Imagina que tienes una lista de elementos, como usuarios.

Cada uno de los usuarios se puede abrir en una ventana modal para su modificación.

No tienes ninguna suscripción al backend, lo que significa que la lista de usuarios no se sincronizará automáticamente con el backend si algún usuario cambia.

Por lo tanto, una vez que se actualiza el perfil de un usuario, desea actualizar automáticamente la lista de usuarios en la ventana modal (incluso en todas las demás pestañas de su sitio web).

¿Qué haremos para sincronizar los datos en estos componentes y pestañas no relacionados?

Solución

La ventana modal y la lista de usuarios deberían poder intercambiar eventos y datos.

Por lo tanto, si se realiza una acción en la ventana modal, el evento debe enviarse a todos los componentes que esperan este tipo de acción (por ejemplo, la lista de usuarios), para que puedan reaccionar a este evento, por ejemplo, sincronizando datos.

Configuremos dicha comunicación entre los componentes "UserList" y "UserProfileModal" usando un pequeño paquete 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;
};

? Ventana modal

? La lista de usuarios

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 es un pequeño paquete de código abierto sin dependencias ni riesgos, también se mantiene activamente y es seguro de usar.

En este punto, la actualización del perfil de usuario en UserProfileModal notificará automáticamente a todos los oyentes como UserList, lo que activará una actualización de la lista de usuarios en UserList, lo que dará como resultado una mejor UX.

No importa dónde se coloquen UserList y UserProfileModal en el árbol de componentes, aún podrán enviarse datos entre sí, incluso en diferentes pestañas del navegador.

Conclusión

Si necesita configurar sin esfuerzo una comunicación global para intercambiar datos entre componentes, utilice el paquete use-app-events.

Proporciona una API fácil de usar, documentación extensa y escritura estricta para garantizar que tengas la mejor experiencia de desarrollador.