Neste artigo veremos como enviar dados entre componentes no React globalmente, mesmo em diferentes guias do navegador.

História

Imagine que você tem uma lista de itens, como usuários.

Cada um dos usuários pode ser aberto em uma janela modal para modificação.

Você não tem nenhuma assinatura no back-end, o que significa que a lista de usuários não será sincronizada automaticamente com o back-end se algum usuário mudar.

Portanto, depois que o perfil de um usuário for atualizado, você deseja atualizar automaticamente a lista de usuários na janela modal (mesmo em todas as outras guias do seu site).

O que faremos para sincronizar os dados nesses componentes e guias não relacionados?

Solução

A janela modal e a lista de usuários devem poder trocar eventos e dados.

Assim, se uma ação for realizada na janela modal, o evento deverá ser enviado para todos os componentes que aguardam esse tipo de ação (por exemplo, a lista de usuários), para que possam reagir a esse evento, por exemplo, por sincronizando dados.

Vamos configurar essa comunicação entre os componentes "UserList" e "UserProfileModal" usando um pequeno pacote 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;
};

? Janela modal

? A lista de usuários

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 é um pequeno pacote de código aberto sem dependências e riscos, também é mantido ativamente e seguro de usar.

Neste ponto, a atualização do perfil do usuário em UserProfileModal notificará automaticamente todos os ouvintes como UserList, o que irá acionar uma atualização da lista de usuários em UserList, resultando em uma UX melhor.

Não importa onde UserList e UserProfileModal são colocados na árvore de componentes, eles ainda poderão enviar dados entre si, mesmo em guias diferentes do navegador.

Conclusão

Se você precisar configurar facilmente a comunicação global para trocar dados entre componentes - use o pacote use-app-events.

Ele fornece uma API fácil de usar, documentação extensa e digitação rigorosa para garantir que você tenha a melhor experiência de desenvolvedor.