في هذه المقالة سننظر في كيفية إرسال البيانات بين المكونات في 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، مما يؤدي إلى تجربة مستخدم أفضل.

لا يهم مكان وضع UserList وUserProfileModal في شجرة المكونات، فسيظل بإمكانهما إرسال البيانات فيما بينهما، حتى في علامات تبويب المتصفح المختلفة.

خاتمة

إذا كنت بحاجة إلى إعداد اتصال عالمي بسهولة لتبادل البيانات بين المكونات - فاستفد من حزمة أحداث use-app.

يوفر واجهة برمجة تطبيقات سهلة الاستخدام، ووثائق شاملة، وكتابة صارمة لضمان حصولك على أفضل تجربة للمطورين.