تكنولوجيا

كيفية مزامنة تخزين Redux عبر علامات تبويب المتصفح – CloudSavvy IT

رسم توضيحي يظهر شعار Redux

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

يمكنك استخدام مكتبة المزامنة والحالة التفاعلية لإضافة مزامنة تخزين عبر الجداول. يوفر هذا نوعًا من البرامج الوسيطة التي يمكنها مزامنة التخزين تلقائيًا بين علامات التبويب المختلفة. بعد الإعداد الأولي ، لن تحتاج إلى التدخل يدويًا في عملية المزامنة.

ملخص

توفر مكتبة Redux State Sync برمجيات Redux الوسيطة ، والتي تحتاج إلى إضافتها إلى المتجر. عندما يتلقى المتجر إجراءً ، سترسل البرامج الوسيطة نفس الإجراء في أي علامة تبويب أخرى مفتوحة على موقعك.

تقوم كل علامة تبويب بتعيين مستمع الرسائل الخاص بها لتلقي إخطارات بالعمليات الواردة. بعد إخطار المستمع ، سيرسل العملية إلى مخزن علامة التبويب.

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

قنوات الراديو متاحة فقط في المستعرضات الأحدث. يستخدم Redux State Sync أفكارًا تجريدية يمكن أن تعود إلى التقنيات البديلة. عندما لا تكون قناة البث مدعومة ، سيتم استخدام IndexedDB أو LocalStorage بدلاً من ذلك.

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

متجر المزامنة

لبدء استخدام Redux State Sync ، أضفه إلى مشروعك عبر npm:

npm install redux-state-sync

بعد ذلك ، قم بإنشاء متجر أساسي. سنقوم بتعديل هذا الرمز لاحقًا لإضافة Redux State Sync.

import createStore from "redux";
 
const state = authenticated: false;
 
const reducer = (state, action) => (...state, ...action);
 
const store = createStore(reducer, state);

الآن لدينا متجر بسيط. للمزامنة عبر علامات التبويب ، أضف البرامج الوسيطة Redux State Sync وقم بإعداد مستمع الرسائل.

import createStore, applyMiddleware from "redux";
import createStateSyncMiddleware, initMessageListener from "redux-state-sync";
 
const reduxStateSyncConfig = ;
 
const reducer = (state, action) => (...state, ...action);
 
const store = createStore(
    reducer,
    state,
    applyMiddleware(createStateSyncMiddleware(reduxStateSyncConfig))
);
 
initMessageListener(store);

يمكنك الآن استخدام المتجر بين علامات التبويب المختلفة. افتح موقع الويب الخاص بك في علامتي تبويب. جدولة الإجراءات في إحدى علامات التبويب. يجب أن ترى الإجراء يظهر في كلا المتجرين في نفس الوقت ، وبالتالي تنفيذ تغييرات الحالة المقابلة في كل متجر. يمكن استخدام امتداد Redux DevTools لمراقبة العمليات الواردة وتغييرات الحالة التي تسببها.

تستخدم البرمجيات الوسيطة لمزامنة الحالة createStateSyncMiddleware() وظائف عملية. هذا يقبل كائنات التكوين لتخصيص عمليات Redux State Sync. في القسم التالي ، سوف ندرس هذا بمزيد من التفصيل.

بعد إنشاء المتجر ، مرره إلى initMessageListener(). تضمن هذه الميزة تكوين الاستماع عبر الطاولات. بدون هذه المكالمة ، قد لا تتلقى علامة التبويب عملية جديدة إذا لم تتم جدولة أي عملية عند تحميلها لأول مرة.

استعمال initMessageListener() لن يتم منحك حق الوصول إلى متجر موجود في علامة تبويب أخرى من علامة تبويب. عندما يفتح المستخدم علامة تبويب جديدة ، سيكون لديه تخزين جديد خاص به افتراضيًا.إذا كنت تريد أن تحصل صفحة علامة التبويب الجديدة على الحالة من صفحة علامة التبويب المفتوحة ، فاستخدم initStateWithPrevTab() وظيفة بدلا من ذلك.

const store = createStore(reducer, state, applyMiddleware(createStateSyncMiddleware()));
initStateWithPrevTab(store);

إذا كانت هناك علامة تبويب مفتوحة أخرى متاحة ، فسيتم استبدال حالة المتجر بالحالة الحالية.

التزامن المخصص

يدعم Redux State Sync خيارات تكوين متعددة ، مما يسمح لك بتخصيص المزامنة. هذه بعض من أكثر الإعدادات فائدة.يتم تعيين كل معلمة كسمة في كائن التكوين الذي تم تمريره createStateSyncMiddleware().

استبعاد العمل

في بعض الأحيان ، ستقوم بتنفيذ إجراءات لا تريد مزامنتها. قد يكون أحد الأمثلة إجراءً يتسبب في ظهور مربع حوار مشروط.قد لا ترغب في عرض مربع الحوار هذا بتنسيق الجميع علامة التبويب المفتوحة للمستخدم!

يمكنك استخدامها blacklist خيارات. قم بتمرير مصفوفة من أسماء الإجراءات كقيمة.

const config = 
    blacklist: ["DEMO_ACTION"]
;
 
// ...
 
// This won't be synced to any other tabs
Store.dispatch(type: "DEMO_ACTION");

يمكنك أيضًا استخدام القائمة البيضاء بدلاً من القائمة السوداء.اقامة whitelist يسمح خيار التكوين فقط بمزامنة الإجراءات المحددة مسبقًا.

إجراء ترشيح دقيق

إذا لم يكن كذلك blacklist أو whitelist يمنحك تحكمًا كافيًا لضبطه predicate خيارات. هذا يقبل وظيفة لتصفية الإجراءات المتزامنة.

const config = 
    predicate: action => (action.type !== "DEMO_ACTION")
;

يتم استدعاء هذه الوظيفة في كل مرة يتم فيها استلام إجراء جديد. سيتلقى الإجراء كمعامل.يجب أن تعود الوظيفة true أو false يشير إلى ما إذا كان يجب مزامنة العملية مع علامات تبويب أخرى.سيقوم المثال أعلاه بمزامنة جميع العمليات باستثناء ما يلي DEMO_ACTION.

إعدادات قناة البث

يمكنك ضبط channel منشأه.الافتراضي هو redux_state_sync. لا تحتاج عادةً إلى تغيير هذا الإعداد ، إلا إذا كنت تريد إجراء عمليتي مزامنة منفصلتين.

يمكنك تمرير الخيارات إلى مكتبة ملخصات قنوات الراديو بالطرق التالية: broadcastChannelOption.يجب أن يكون pubkey/broadcast-channel مكتبة.

يمكنك استخدام هذا الخيار لفرض استخدام تقنية تخزين معينة. في هذا المثال ، حتى إذا كان المستعرض يدعم قنوات البث ، فستتم مزامنته دائمًا عبر IndexedDB.

const config = 
    broadcastChannelOption: type: "idb"
;

التكامل مع Redux-Persist

سترغب عادةً في الجمع بين Redux State Sync و Redux Persist. تعد Redux Persist مكتبة شائعة تقوم تلقائيًا بتخزين تخزين Redux في المتصفح.

عند استخدام Redux Persist ، لا تحتاج إلى استخدام Redux Persist initStateWithPrevTab() سمات.استعمال initMessageListener() على العكس من ذلك ، لأن الحالة الأولية ستكون دائمًا الحالة المستمرة التي توفرها Redux Persist.

قم بإدراج عملية Redux Persist في القائمة السوداء في تكوين Redux State Sync. لا يلزم مزامنتها عبر علامات التبويب. يجب عليك فقط مزامنة التغييرات التي تؤثر فعليًا على المتجر ، وليس العمليات المتعلقة بدورة حياة المتجر.

const config = 
    blacklist: ["persist/PERSIST", "persist/REHYDRATE"]
;

التعميم

يتيح لك Redux State Sync مزامنة إجراءات المستخدم عبر علامات التبويب. هذه التطبيقات غير محدودة عمليًا وقد تعمل على تحسين تجربة المستخدم. عندما يقوم المستخدمون بتنفيذ إجراءات على موقع الويب الخاص بك ، فإنها تنعكس على الفور في علامات التبويب المفتوحة الأخرى.

حالة الاستخدام “الكلاسيكية” هي مزامنة نتائج تسجيل الدخول والخروج. ومع ذلك ، هناك مزايا أخرى ، مثل إتاحة الإخطارات الواردة لجميع علامات التبويب ، أو مزامنة تفضيلات العميل (مثل سمة واجهة المستخدم التي حددها المستخدم).

حجم مكتبة إعادة الحالة المزامنة المصغرة هو 19 كيلوبايت. باستخدام برنامج التثبيت الذي يحتوي فقط على بضعة أسطر إضافية من التعليمات البرمجية ، يجب أن تفكر في إضافة Redux State Sync إلى مشروعك التالي. يسمح لك بربط علامات التبويب معًا ككل ، بدلاً من تركها موجودة ككيانات منفصلة.

مقالات ذات صلة

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

زر الذهاب إلى الأعلى