В этой статье мы рассмотрим, как отправлять данные между компонентами в React глобально, даже на разных вкладках браузера.

История

Представьте, у вас есть список элементов, например пользователей.

Каждого из пользователей можно открыть в модальном окне для внесения изменений.

У вас нет подписок на серверную часть, а это означает, что список пользователей не будет автоматически синхронизироваться с серверной частью, если какой-либо пользователь изменится.

Итак, после обновления профиля пользователя вы хотите автоматически обновить список пользователей в модальном окне (даже на всех других вкладках вашего сайта).

Что мы будем делать, чтобы синхронизировать данные в этих несвязанных компонентах и ​​вкладках?

Решение

Модальное окно и список пользователей должны иметь возможность обмениваться событиями и данными.

Таким образом, если действие выполняется в модальном окне, событие должно быть отправлено всем компонентам, ожидающим такого рода действия (например, списку пользователей), чтобы они могли отреагировать на это событие, например, синхронизация данных.

Настроим такую ​​связь между компонентами UserList и UserProfileModal с помощью небольшого пакета 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;
};

? Модальное окно

? Список пользователей

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 — это небольшой пакет с открытым исходным кодом, без каких-либо зависимостей и рисков, он также активно поддерживается и безопасен в использовании.

На этом этапе обновление профиля пользователя в UserProfileModal автоматически уведомит всех слушателей, таких как UserList, что приведет к обновлению списка пользователей в UserList, что приведет к улучшению UX.

Неважно, где в дереве компонентов расположены UserList и UserProfileModal, они все равно смогут отправлять данные друг другу, даже в разных вкладках браузера.

Заключение

Если вам нужно без особых усилий настроить глобальную связь для обмена данными между компонентами — воспользуйтесь пакетом use-app-events.

Он предоставляет простой в использовании API, обширную документацию и строгую типизацию, чтобы обеспечить максимальное удобство разработчика.