React의 탭 간에 데이터를 보냅니다.-JS 튜토리얼-php.cn

React의 탭 간에 데이터를 보냅니다.

DDD

풀어 주다： 2024-09-14 06:23:32

원래의

1208명이 탐색했습니다.

Send data between tabs in React.

이 글에서는 다른 브라우저 탭에서도 전 세계적으로 React의 구성 요소 간에 데이터를 전송하는 방법을 살펴보겠습니다.

이야기

사용자와 같은 항목 목록이 있다고 상상해 보세요.

각 사용자는 수정을 위해 모달 창에서 열 수 있습니다.

백엔드에 대한 구독이 없습니다. 즉, 사용자가 변경되면 사용자 목록이 백엔드와 자동으로 동기화되지 않습니다.

따라서 사용자 프로필이 업데이트되면 모달 창 아래(웹사이트의 다른 모든 탭에서도) 사용자 목록을 자동으로 새로 고치고 싶습니다.

관련되지 않은 구성요소와 탭의 데이터를 동기화하려면 어떻게 해야 하나요?

해결책

모달 창과 사용자 목록은 이벤트와 데이터를 교환할 수 있어야 합니다.

따라서 모달 창에서 작업이 수행되면 이러한 종류의 작업(예: 사용자 목록)을 기다리는 모든 구성 요소에 이벤트가 전송되어 예를 들어 다음과 같이 이 이벤트에 반응할 수 있습니다. 데이터를 동기화하는 중입니다.

소형 패키지 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...
  ));
};

로그인 후 복사