Høflighed https://stocksnap.io/ det er fantastisk !!

Sådan bruges Redux Persist, når du migrerer dine stater

Opbevaring har altid været en integreret del af bygningen af ​​apps. Mens jeg byggede en webapp til vores firma, havde jeg brug for en måde at fortsætte mine tilstande med opbevaring på, som var pålidelig, let at bruge og konfigurerbar baseret på kravene.

Heldigvis var dette bibliotek svaret på alle mine problemer!

Denne artikel er baseret på et problem, jeg stod overfor, mens jeg arbejdede på et projekt. Lad os dykke dybt og forstå, hvordan biblioteket hjalp mig med at løse det.

Hvis du ikke allerede har brugt redux-persist, skal du læse dokumenterne, da de er selvforklarende. Hvis du vil vide, hvorfor du skal bruge dette bibliotek, skal du gennemgå denne artikel - det er en fantastisk introduktion af forfatteren selv!

Problem

Lad os tage et eksempel, hvor jeg ville fortsætte med at reducere i min lokale lager:

// Reducer
reducerA: {
  motor: {
    model: "F5AAA",
    producent: "Ferrari"
  },
  dæk: {
    model: "T123",
    producent: "MRF",
    ejer: {
      detaljer: {
        navn: "Zack",
        alder: "26"
      }
    }
  },
  betingelse: "prime"
}
//Udsigt
klasse TestComponent udvider React.Component {
  render () {
    const model = someStateOfReducerA.tyre.model
    const-fabrikant = someStateOfReducerA.tyre.man producer
    Vend tilbage (
      
{model}       
{producent}     )   } }
// Reducer i localStorage
reducerA: {
  motor: {
    model: "F5AAA",
    producent: "Ferrari"
  },
  dæk: {
    model: "T123",
    producent: "MRF",
    ejer: {
      detaljer: {
        navn: "Zack",
        alder: "26"
      }
    }
  },
  betingelse: "prime"
}

Nu er denne reducer vedvarende i vores klients enhed. Så hvad vil der ske, hvis jeg introducerer en ny nøgle til vores reducerA?

reducerA: {
  motor: {
    model: "F5AAA",
    producent: "Ferrari"
  },
  dæk: {
    model: "T123",
    producent: "MRF",
    ejer: {
      detaljer: {
        navn: "Zack",
        alder: "26",
        adresse: "CA" // Ny nøgle tilføjet
      }
    }
  },
  betingelse: "prime"
}

Lad os sige, at vi har en opfattelse, der giver værdien af ​​vores nyligt indførte nøgle:

// Vis med ny nøgleadresse
klasse TestComponent udvider React.Component {
  render () {
    const model = someStateOfReducerA.tyre.model
    const-fabrikant = someStateOfReducerA.tyre.man producer
    const address = someStateOfReducerA.tyre.owner.details.address
    Vend tilbage (
      
{model}       
{producent}       
{adresse}
    )
  }
}

Når jeg indlæser min applikation med den nyligt introducerede nøgle, mislykkes gengivelsen af ​​vores synspunkt. Det kaster en fejl, hvor det siger:

Kan ikke gengive den ikke-definerede adresse

Dette skete, fordi klientens lager er synkroniseret med rootReducer, der blev initialiseret under vores app-indlæsning.

Selvom vi introducerede den nye nøgle, har klientens lager aldrig modtaget den. Det initialiserer vores rootReducer med de gamle værdier i lager, hvor adressen aldrig eksisterede, og får rendering af vores komponent til at mislykkes.

Opløsning

Dette fører til et velkendt koncept: migrering af databasen.

En skemamigrering udføres i en database, når det er nødvendigt at opdatere eller vende tilbage til databasens skema til en nyere eller ældre version. Migrationer udføres programmatisk ved hjælp af et skemamigreringsværktøj - Wikipedia

LocalStorage er faktisk en lille database med nøgleværdipar. Redux Persist gør det smukt. Hvis du ser på et projekt, der er initialiseret med dette bibliotek, bruger det allerede en standardversion -1. Se nedenfor på skærmbilledet taget fra applikationsfanen i Chrome-værktøjet.

localStorage i Chrome Dev Tool

Dette er virkelig godt! Biblioteket opretholder allerede en standardversion for os, så vi kan integrere migreringsfunktionen i fremtiden.

Nøglen er at konfigurere din vedvarende konfiguration i din rootReducer.

eksport const persistConfig = {
  nøgle: 'testApp',
  version: 0, // Ny version 0, standard eller tidligere version -1
  opbevaring,
  debug: sandt,
  stateReconciler: autoMergeLevel2,
  migrere: createMigrate (migrationer, {debug: true})
}

Det er vigtigt, at vi opdaterer versionen til 0, så den migrerer vores lager fra -1 til 0.

Dernæst skriver vi migreringen for at lade vores lager oplyse, at der er en opdatering.

const migrations = {
  0: (tilstand) => {
    Vend tilbage {
      ...stat,
      dæk: {
        ... state.tyre,
        ejer: {
          ... state.tyre.owner,
          detaljer: {
            ... state.tyre.owner.details,
            adresse: "CA" // Ny nøgle tilføjet til migrering
          }
        }
      }
    }
  }
}

Overførslerne bruges derefter i vores persist-konfiguration, der er nævnt ovenfor:

migrere: createMigrate (migrationer, {debug: true})

Når vi genindlæser vores applikation, går vores applikation således gennem en afstemningsfase, hvor lagringen bringes i synk med den nyligt opdaterede reducer.

Konklusion

Ovenstående konfiguration holder applikationen altid opdateret på klientsiden, når du frigiver nye versioner. Det er meget vigtigt, at vi er omhyggelige med dette, når vi opretter offline-første apps.

Det er enkelt, når du forstår det grundlæggende koncept og teknik til at gøre det. Jeg håber, at denne artikel hjalp dig med at forstå vigtigheden af ​​at styre versioner af dine tilstande på lager :)

Følg mig på twitter for at få flere opdateringer angående nye artikler og for at holde dig opdateret i de nyeste frontend-udviklinger. Del også denne artikel på twitter for at hjælpe andre med at vide om den. Deling er omsorgsfuld ^ _ ^.

Husk, at du kan klappe op 50 gange for at udbrede din kærlighed!

Nogle nyttige ressourcer

  1. https://github.com/rt2zz/redux-persist/blob/master/docs/api.md
  2. https://medium.com/@clrksanford/persist-ence-is-key-using-redux-persist-to-store-your-state-in-localstorage-ac6a000aee63
  3. https://medium.com/async-la/redux-persist-your-state-7ad346c4dd07