A Redux áruház fenntartása – CloudSavvy IT

A Redux leegyszerűsíti a komplex alkalmazások állapotkezelését. Mivel a Redux áruház tartalmazza az alkalmazás teljes állapotát, annak fenntartása lehetővé teszi a felhasználó munkamenetének mentését és visszaállítását.

Az áruház létrehozása

Feltételezzük, hogy ismeri a Redux alapjait.

Ehhez az oktatóanyaghoz egy naiv reduktorral ellátott barebones boltot fogunk használni.

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

Ez a triviális példa meghatározza a Redux áruház színpadát, amely nyomon követheti, hogy bejelentkeztünk-e. A legtöbb felhasználó várhatóan továbbra is bejelentkezett marad, amikor visszatér az alkalmazásához. Jelenleg az állapot minden egyes alkalommal újraképződik, amikor az alkalmazás betöltődik, így a felhasználók csak az aktuális munkameneten belül maradnak hitelesítve.

Redux Persist hozzáadása

Redux Persist egy népszerű könyvtár, amely lehetővé teszi a kitartás hozzáadását az üzlethez. A könyvtár minden alkalommal, amikor az állapot frissül, automatikusan elmenti a boltot. Nem kell semmilyen perzisztencia kódot írni a műveletekbe vagy a csökkentőkbe.

Kezdje a Redux Persist telepítésével az npm használatával:

npm install redux-persist

Most össze kell kapcsolnia a könyvtárat az üzletével. Csomagolja be a gyökérszűkítőt a Redux Persist’s segítségével persistReducer funkció. Ez lehetővé teszi a Redux Persist számára, hogy megvizsgálja az üzletébe küldött műveleteket. Fel kell hívnia persistStore() hogy induljon a kitartásból.

import {createStore} from "redux";
import {persistStore, persistReducer} from "redux-persist";
import storage from "redux-persist/lib/storage";
 
const state = {authenticated: false};
 
const reducer = (state, action) => ({...state, ...action});
 
const persistConfig = {
    key: "root",
    storage
};
 
const persistedReducer = persistReducer(persistConfig, reducer);
 
const store = createStore(persistedReducer, state);
 
const persistor = persistStore(store);

Ez a konfiguráció használatra kész. Csak néhány sornyi kóddal gondoskodtunk arról, hogy a Redux állapot változásai automatikusan fennmaradjanak. A felhasználók minden alkalommal leállítják a kijelentkezést, amikor újratöltik az alkalmazást.

Szűkítőnk tovább javul persistReducer() hogy kitartó támogatást is tartalmazzon. Ezt az újonnan becsomagolt reduktort adják át neki createStore() az eredeti helyett. Végül, persistStore() hívják, átadva a bolti példányban, a perzisztencia engedélyezéséhez.

A Redux Persist konfigurálása

A persistReducer() A function egy konfigurációs objektumot fogad el első paraméterként. Meg kell adnia a key és storage tulajdonságait.

key beállítja a fennmaradó objektum legfelső szintű tulajdonságának nevét. Az Ön üzletének állapota menti a tulajdonság értékeként.

storage meghatározza a használandó tároló motort. A Redux Persist többféle támogatást nyújt tárolási háttérképek a környezettől függően. Webes használatra a localStorage és sessionStorage Az API-k és az alapvető sütik egyaránt támogatottak. Opciók állnak rendelkezésre a React Native, a Node.js, az Electron és számos más platform számára is.

Meghatározza a használni kívánt tárolómotort azáltal, hogy importálja a csomagjából. Ezt követően az API-t megvalósító fő objektumát kell átadni storage a Redux Persist opciót.

A saját tárolómotorját egyéni tartóssági mechanizmus használatával valósíthatja meg. Hozzon létre egy objektumot a setItem(), getItem() és removeItem() mód. A Redux Persist aszinkron, ezért minden módszernek meg kell adnia egy ígéretet, amely a művelet befejezése után megoldódik.

A perzisztens objektum

A persistor tárgy visszatért persistStore() A call-nak van néhány segédprogramja a kitartás kezeléséhez.

A kitartással szüneteltetheti és folytathatja a kitartást pause() és resume() módszerek. Kényszerítheti az azonnali írást a tároló motorra flush(). Ez hasznos lehet, ha garantálnia kell, hogy az állapota megmarad egy adott művelet után.

Az összes megmaradt adatot a tárolómotorról törölheti .purge(). A legtöbb esetben ezt el kell kerülni – használjon Redux műveletet a tároló törléséhez, amely automatikusan továbbterjed a megmaradt adatokra.

Állami megbékélés

A Redux Persist három különböző módon támogatja a bolt hidratálását tartós állapottól. A hidratálás automatikusan bekövetkezik, amikor hív persistStore() és a meglévő adatok megtalálhatók a tároló motorban. A Redux Persist-nek be kell vezetnie ezeket a kezdeti adatokat az üzletébe.

Az alapértelmezett stratégia az objektumok egyesítése egy szint mélységig. A beágyazott objektumok nem kerülnek egyesítésre – a beérkező változás felülír mindent, ami már az Ön állapotában van.

• Tartós állapot: {"demo": {"foo": "bar"}}
• Állítsa be a raktárba: {"demo": {"example": test"}}
• Eredményes hidratált áruház: {"demo": {"foo": "bar"}}

Opcionálisan válthat objektumok egyesítésére akár mélységig. Importálja az új állapotegyeztetőt, és adja hozzá az áruház konfigurációjához:

// usual imports omitted
import autoMergeLevel2 from "redux-persist/lib/stateReconciler/autoMergeLevel2";
 
const persistConfig = {
    key: "root",
    storage,
    stateReconciler: autoMergeLevel2
};
 
// store configuration omitted

Itt van ennek az eredménye autoMergeLevel2 a fenti példa hidratálásakor:

• Tartós állapot: {"demo": {"foo": "bar"}}
• Állítsa be a raktárba: {"demo": {"example": test"}}
• Eredményes hidratált áruház: {"demo": {"foo": "bar", "example": "test"}}

A. Értékei demo a két forrás tulajdonságai kombinálódnak a hidratálás során.

Használja a hardSet egyeztetõ, ha teljesen le akarja tiltani az egyesítést. Ez helyettesíti az üzlet állapotát a tároló motor tartalmával. Ez gyakran nemkívánatos, mivel bonyolultabbá teszi az áttelepítéseket – ha új kezdeti tulajdonságot ad hozzá az állapotához, akkor a meglévő felhasználók számára nem lesz beállítva, amint a munkamenet hidratálódik.

Államvándorlás

Az átállásokkal kapcsolatban a Redux Persist beépített támogatást nyújt a fennmaradó állapot frissítéséhez. Előfordulhat, hogy a tulajdonságokat újabb alternatívákkal helyettesíti. Biztosnak kell lennie abban, hogy a meglévő felhasználóknak nem kell visszaállítaniuk az alkalmazást a használat folytatásához.

Az áttelepítéseket a migrate konfigurációs kulcs. A legegyszerűbb megközelítés egy olyan függvény átadása, amely az állapotot paraméterként veszi fel, és az átállított állapotot adja vissza. Be kell állítania a version konfigurációs kulcs, hogy a Redux Persist fel tudja ismerni, mikor kell migrálni. Minden alkalommal a version megváltozik, a migrációs függvény meghívásra kerül.

const persistConfig = {
    key: "root",
    storage,
    version: 1,
    migrate: (state) => ({...state, oldProp: undefined, newProp: "foobar"});
};

A függvény megközelítés alternatívájaként átadhat egy objektumot, amely lehetővé teszi az egyes migrációs függvények létrehozását az egyes verzió lépésekhez. Ezt át kell adni a createMigrate() funkciót, mielőtt átadnák a Redux Persist konfigurációjának.

// other imports omitted
import {createMigrate} from "redux-persist";
 
const migrations = {
    1: state => ({...state, extraProp: true}),
    2: state => ({...state, extraProp: undefined, extraPropNew: true})
};
 
const persistConfig = {
    key: "root",
    storage,
    version: 2,
    migrate: createMigrate(migrations)
}

Ebben a példában az áruházat 2-es verzióként inicializáljuk. Ha az állapot már létezett a felhasználó eszközén 0-as verzióként, akkor mindkét áttelepítés futtatásra kerül. Ha a felhasználó jelenleg az 1. verziót használta, akkor csak az utolsó áttelepítés fut.

Transzformációk alkalmazása

Végül meg kell említeni, hogy a Redux Persist támogatja az „átalakítás” funkciók használatát. Ezek hozzáadódnak a konfigurációhoz, és lehetővé teszik a mentett vagy visszaállított adatok kezelését.

A könyvtár dokumentációja számos használható átalakítást sorol fel. Ez lehetővé teszi, hogy automatikusan tömörítse, titkosítsa vagy lejárassa a megmaradt állapotot anélkül, hogy önnek kellene végrehajtania bármilyen alkalmazásszintű logikát.

Az átalakításokat tömbként adják meg a konfigurációs objektumban. A megadott sorrendben hajtják végre őket.

const persistStore = {
    key: "root",
    storage,
    transforms: [MyTransformer]
};

Saját transzformátorának megírásához használja a createTransform() funkció. Ennek két funkció és egy konfigurációs objektum van átadva:

import {createTransform} from "redux-persist";
 
const MyTransformer = createTransform(
    (inboundState, key) => ({...inboundState, b64: btoa(inboundState.b64)}),
    (outboundState, key) => ({...outboundState, b64: atob(outboundState.b64)}),
    {}
);

Ebben a példában tároljuk a b64 állapotunk tulajdonsága, mint annak Base64 kódolású értéke. Amikor az adatok tárolásra kerülnek (outboundState), az érték kódolva lesz. Dekódolják, amikor a tartós állapotot hidratálják (inboundState).

A konfigurációs objektummal definiálható a whitelist és blacklist a szűkítő nevekből. A transzformátort akkor csak olyan reduktorokkal használnák, amelyek megfelelnek ezeknek a korlátozásoknak.

Következtetés

A Redux Persist egy nagyszerű könyvtár, egyszerű felülettel. A Redux áruház automatikus perzisztenciáját csak néhány kódsorban állíthatja be. A felhasználók és a fejlesztők egyaránt hálásak lesznek a kényelméért.