React のタブ間でデータを送信します。

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

---

話

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

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

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

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

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

---

解決

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

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

小さなパッケージ use-app-events を使用して、「UserList」コンポーネントと「UserProfileModal」コンポーネント間の通信を設定しましょう:

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 <button onClick={submitUpdate}>Save changes</button>;
};

? モーダルウィンドウ

? ユーザーのリスト

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、広範なドキュメント、厳密な型付けが提供されます。

以上がReact のタブ間でデータを送信します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。