この記事では、異なるブラウザー タブであっても、React のコンポーネント間でデータをグローバルに送信する方法について説明します。

---

話

ユーザーなどのアイテムのリストがあると想像してください。

各ユーザーはモーダル ウィンドウで開いて変更できます。

バックエンドへのサブスクリプションがありません。つまり、ユーザーが変更された場合、ユーザーのリストはバックエンドと自動的に同期されません。

そこで、ユーザーのプロフィールが更新されたら、モーダル ウィンドウの下のユーザーのリストを (ウェブサイトの他のすべてのタブでも) 自動的に更新したいと考えます。

これらの無関係なコンポーネントとタブのデータを同期するにはどうすればよいですか?

---

解決

モーダル ウィンドウとユーザーのリストはイベントとデータを交換できる必要があります。

したがって、アクションがモーダル ウィンドウで実行される場合、この種のアクション (ユーザーのリストなど) を待機しているすべてのコンポーネントにイベントを送信して、コンポーネントがこのイベントに反応できるようにする必要があります。データを同期しています。

小さなパッケージ use-app-events:

を使用して、「UserList」コンポーネントと「UserProfileModal」コンポーネント間の通信を設定しましょう。

const UserProfileModal = () => { // URL からユーザー ID を取得します。例: const { userId } = useParams(); // 1. useAppEvents のインスタンスを作成します const {notifyEventListeners} = useAppEvents(); const submitUpdate = async () => { // ここで BE にリクエストを送信し、応答を待ちます... // 2. 更新されたユーザー ID を含むイベントを送信します。 // それをリッスンしている他のすべてのコンポーネント NoticeEventListeners('ユーザー更新', ユーザー ID); }; return 変更を保存; };

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. useAppEvents のインスタンスを作成します const { listenForEvents } = useAppEvents(); // 2. アプリ内で「user-update」イベントが発生するのをリッスンして待ちます listenForEvents('user-update', (userId) => { // 3. 更新されたファイルをロードして、発生したイベントに反応します。 // BE のユーザーのリストはここにあります... }); return users.map((user) => ( // ここにユーザーをレンダリングします... )); };

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;
};

use-app-events は、依存関係やリスクのない小さなオープンソース パッケージであり、積極的にメンテナンスされており、安全に使用できます。

この時点で、UserProfileModal のユーザー プロファイルの更新は、UserList などのすべてのリスナーに自動的に通知され、UserList 内のユーザーのリストの更新がトリガーされ、UX が向上します。

UserList と UserProfileModal がコンポーネント ツリー内のどこに配置されても問題はありません。

異なるブラウザ タブにいても、相互にデータを送信できます。

---

結論

コンポーネント間でデータを交換するためにグローバル通信を簡単に設定する必要がある場合は、use-app-events パッケージを使用してください。

使いやすい API、広範なドキュメント、厳密な型付けを提供し、最高の開発者エクスペリエンスを保証します。