A Redux egy kényelmes módszer az összetett webalkalmazások állapotának kezelésére. A Redux áruház azonban nincs szinkronizálva a fülek között, ami néhány kínos helyzethez vezethet. Ha a felhasználó egy lapon kijelentkezik, akkor ideális lenne, ha ez a művelet a többi nyitott fülén is megjelenik.
A lapok közötti szinkronizálást hozzáadhatja a reagál-állapot-szinkron könyvtár. Ez egy köztes szoftvert biztosít, amely automatikusan szinkronizálja az áruházat a fülek között. A kezdeti beállítás után nem kell manuálisan beavatkoznia a szinkronizálási folyamatba.
Áttekintés
A Redux State Sync könyvtár egy Redux köztes szoftvert kínál, amelyet hozzá kell adnia a boltjához. Amikor az áruház megkapja a műveletet, a köztes szoftver ugyanazt a műveletet küldi a webhelyére nyitott bármely más fülön.
Minden fül beállítja a saját üzenetfigyelőjét a bejövő műveletekről szóló értesítések fogadására. Amikor értesíti a hallgatót, elküldi a műveletet a fül tárolójába.
Az üzeneteket a fülek között cserélhetjük a Broadcast Channel API. Ez egy olyan böngészőfunkció, amely lehetővé teszi az azonos eredetű fülek kommunikációját egymással. A fülek „feliratkoznak” a „csatornákra”. A böngésző értesíti őket, amikor egy másik fül üzenetet küld a feliratkozott csatornára.
A Broadcast Channel csak újabb böngészőkben érhető el. A Redux State Sync olyan absztrakciót használ, amely alternatív technológiákra képes visszacsatolni. Ha a Broadcast Channel nem támogatott, akkor az IndexedDB vagy a LocalStorage lesz használva.
A Broadcast Channel használata bizonyos korlátozásokkal sújtja a fülek közötti küldés lehetőségét. A küldött adatokat a böngészőnek támogatnia kell strukturált klón algoritmus. Ide tartoznak a skaláris értékek, tömbök, sima JavaScript objektumok és foltok. A komplex értékek nem kerülnek pontosan átadásra.
Az áruház szinkronizálása
A Redux State Sync használatának megkezdéséhez vegye fel a projektbe az npm-en keresztül:
npm install redux-state-sync
Ezután hozzon létre egy alap boltot. Egy pillanat alatt módosítjuk ezt a kódot a Redux State Sync hozzáadásához.
import {createStore} from "redux"; const state = {authenticated: false}; const reducer = (state, action) => ({...state, ...action}); const store = createStore(reducer, state);
Most egy egyszerű üzletünk van. A fülek közötti szinkronizáláshoz adja hozzá a Redux State Sync köztes szoftvert, és állítson be egy üzenetfigyelőt.
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);
Az áruház készen áll a fülek közötti használatra. Nyissa meg webhelyét két fülön. Küldjön műveletet az egyik fülön. Látnia kell, hogy a művelet mindkét üzletben megjelenik, és mindegyikben végrehajtja a megfelelő állapotváltozást. Az Redux DevTools kiterjesztéssel figyelhető a bejövő műveletek és az általuk okozott állapotváltozások.
Az állapotszinkronizáló köztes szoftver a createStateSyncMiddleware() hasznossági függvény. Ez elfogadja a Redux State Sync működésének testreszabásához használt konfigurációs objektumot. Ezt a következő szakaszban vizsgáljuk meg alaposabban.
Az áruház létrehozása után továbbadják neki initMessageListener(). Ez a funkció biztosítja a keresztfüles hallgatás konfigurálását. E hívás nélkül előfordulhat, hogy a fülek nem kapnak új műveleteket, ha az első betöltéskor nem történt művelet.
Használata initMessageListener() nem adja meg a fülének a hozzáférést a másik lapon lévő meglévő áruházhoz. Amikor a felhasználó új lapot nyit meg, akkor alapértelmezés szerint saját friss tárral rendelkezik. Ha azt szeretné, hogy az új lapok állapotát egy nyitott lapról kapják meg, használja a initStateWithPrevTab() funkció helyett.
const store = createStore(reducer, state, applyMiddleware(createStateSyncMiddleware({}))); initStateWithPrevTab(store);
Az áruház állapota lecserélődik a meglévőre, ha rendelkezésre áll még egy nyitott fül.
Testreszabott szinkronizálás
A Redux State Sync számos konfigurációs lehetőséget támogat a szinkronizálás testreszabásához. Íme néhány a leghasznosabb beállítások közül. Mindegyik tulajdonságként van beállítva az átadott konfigurációs objektumban createStateSyncMiddleware().
Műveletek kizárása
Néha olyan műveleteket hajt végre, amelyeket nem szeretne szinkronizálni. Ilyen lehet például egy olyan művelet, amely megjeleníti a modális párbeszédpanelt. Valószínű, hogy nem szeretné, hogy ez a párbeszédpanel megjelenjen összes a felhasználó nyitott lapjai!
A. Használatával kizárhat bizonyos megnevezett műveleteket blacklist választási lehetőség. Adjon meg egy műveletnév tömböt értékként.
const config = { blacklist: ["DEMO_ACTION"] }; // ... // This won't be synced to any other tabs Store.dispatch({type: "DEMO_ACTION"});
Feketelista helyett használhat fehérlistát is. Állítsa be a whitelist config opció csak előre meghatározott műveletek szinkronizálását teszi lehetővé.
A műveletek pontos szűrése
Ha egyik sem blacklist vagy whitelist elegendő ellenőrzést ad, állítsa be a predicate választási lehetőség. Ez elfogad egy olyan funkciót, amelyet a szinkronizálható műveletek szűrésére használnak.
const config = { predicate: action => (action.type !== "DEMO_ACTION") };
A funkció minden alkalommal meghívásra kerül, amikor új művelet érkezik. Paraméterként megkapja a műveletet. A függvénynek vissza kell térnie true vagy false annak jelzése, hogy a műveletet szinkronizálni kell-e más fülekkel. A fenti példa minden műveletet szinkronizál, kivéve DEMO_ACTION.
Broadcast Channel Settings
A Broadcast Channel nevét megváltoztathatja a channel ingatlan. Alapértelmezés szerint redux_state_sync. Ezt általában nem kell megváltoztatnia, kivéve, ha két külön szinkronizálási rutint szeretne.
Beállítással átadhatja a beállításokat a Broadcast Channel absztrakciós könyvtárának broadcastChannelOption. Ennek egy konfigurációs objektumnak kell lennie, amelyet a pubkey/broadcast-channel könyvtár.
Ezzel kényszeríthet egy adott tárolási technológiát. Ebben a példában a szinkronizálás mindig az IndexedDB-n keresztül történik, még akkor is, ha a böngésző natív támogatást nyújt a Broadcast Channels számára.
const config = { broadcastChannelOption: {type: "idb"} };
Integráció a Redux-Persist
Gyakran érdemes használni a Redux State Sync szolgáltatást a Redux Persist programmal együtt. A Redux Persist egy népszerű könyvtár, amely automatikusan továbbra is fennáll a Redux áruház a böngészőben.
A Redux Persist használatakor nem kell használnia a Redux Persist initStateWithPrevTab() funkció. Használat initMessageListener() ehelyett, mivel a kezdeti állapot mindig a Redux Persist által biztosított tartós állapot lesz.
Feketelista Redux Persist műveletek a Redux State Sync konfigurációján belül. Ezeket nem kell szinkronizálni a fülek között. Csak azokat a változásokat kell szinkronizálnia, amelyek ténylegesen befolyásolják az áruházat, és nem az életciklusához kapcsolódó műveleteket.
const config = { blacklist: ["persist/PERSIST", "persist/REHYDRATE"] };
Összegzés
A Redux State Sync segítségével szinkronizálhatja a felhasználói műveleteket a füleken. Az alkalmazások gyakorlatilag határtalanok, és valószínűleg javítják a felhasználói élményt. Amint a felhasználók műveleteket hajtanak végre az Ön webhelyén, azonnal megjelennek a többi megnyitott lapon.
A „klasszikus” használati eset a bejelentkezés és a kijelentkezés eredményeinek szinkronizálása. Vannak más előnyei is, például a bejövő értesítések elérhetővé tétele az összes fül számára, vagy az ügyféloldali beállítások szinkronizálása, például a felhasználó által kiválasztott felhasználói felület téma.
Az tömörített redux-state-sync könyvtár súlya 19KB. Csak néhány extra kódsorból álló beállítás esetén fontolja meg a Redux State Sync hozzáadását a következő projekthez. Lehetővé teszi a fülek összekapcsolását összetartó egésszé, ahelyett, hogy önálló entitásként léteznének.
