Mit freundlicher Genehmigung von https://stocksnap.io/ es ist fantastisch !!

Verwendung von Redux Persist bei der Migration Ihrer Status

Speicher war schon immer ein wesentlicher Bestandteil beim Erstellen von Apps. Beim Erstellen einer Webanwendung für unser Unternehmen musste sichergestellt werden, dass meine Status im Speicher erhalten bleiben, der zuverlässig, benutzerfreundlich und den Anforderungen entsprechend konfigurierbar war.

Zum Glück war diese Bibliothek die Antwort auf alle meine Probleme!

Dieser Artikel basiert auf einem Problem, mit dem ich während der Arbeit an einem Projekt konfrontiert war. Lassen Sie uns tief eintauchen und verstehen, wie die Bibliothek mir bei der Lösung geholfen hat.

Wenn Sie Redux-Persist noch nicht verwendet haben, lesen Sie die Dokumentation, da sie selbsterklärend ist. Wenn Sie wissen möchten, warum Sie diese Bibliothek verwenden sollten, lesen Sie diesen Artikel - es ist ein großartiges Intro des Autors selbst!

Problem

Nehmen wir ein Beispiel, in dem ich eine Reduzierung in meinem localStorage beibehalten wollte:

// Reduzierer
ReduziererA: {
  Motor: {
    Modell: "F5AAA",
    Hersteller: "Ferrari"
  },
  Reifen: {
    Modell: "T123",
    Hersteller: "MRF",
    Inhaber: {
      Einzelheiten: {
        Name: "Zack",
        Alter: "26"
      }
    }
  },
  Bedingung: "prime"
}
//Aussicht
Klasse TestComponent erweitert React.Component {
  render () {
    const model = someStateOfReducerA.tyre.model
    const manufacturer = someStateOfReducerA.tyre.manufacturer
    Rückkehr (
      
{model}       
{Hersteller}     )   } }
// In localStorage reduzieren
ReduziererA: {
  Motor: {
    Modell: "F5AAA",
    Hersteller: "Ferrari"
  },
  Reifen: {
    Modell: "T123",
    Hersteller: "MRF",
    Inhaber: {
      Einzelheiten: {
        Name: "Zack",
        Alter: "26"
      }
    }
  },
  Bedingung: "prime"
}

Jetzt ist diese Reduzierung auf dem Gerät unseres Kunden erhalten geblieben. Was passiert also, wenn ich einen neuen Schlüssel für unseren Reduzierer A einführe?

ReduziererA: {
  Motor: {
    Modell: "F5AAA",
    Hersteller: "Ferrari"
  },
  Reifen: {
    Modell: "T123",
    Hersteller: "MRF",
    Inhaber: {
      Einzelheiten: {
        Name: "Zack",
        Alter: "26",
        Adresse: "CA" // Neuer Schlüssel hinzugefügt
      }
    }
  },
  Bedingung: "prime"
}

Nehmen wir an, wir haben eine Ansicht, die den Wert unseres neu eingeführten Schlüssels wiedergibt:

// Mit neuer Schlüsseladresse anzeigen
Klasse TestComponent erweitert React.Component {
  render () {
    const model = someStateOfReducerA.tyre.model
    const manufacturer = someStateOfReducerA.tyre.manufacturer
    const address = someStateOfReducerA.tyre.owner.details.address
    Rückkehr (
      
{model}       
{Hersteller}       
{address}
    )
  }
}

Wenn ich meine Anwendung mit dem neu eingeführten Schlüssel lade, schlägt das Rendern unserer Ansicht fehl. Es wird ein Fehler ausgegeben, in dem es heißt:

Die Adresse von undefined kann nicht gerendert werden

Dies ist darauf zurückzuführen, dass der Speicher des Clients mit dem RootReducer synchronisiert ist, der beim erneuten Laden der App initialisiert wurde.

Obwohl wir den neuen Schlüssel eingeführt haben, hat der Speicher des Kunden ihn nie erhalten. Es initialisiert unseren rootReducer mit den alten Werten im Speicher, bei denen die Adresse nie existiert hat, und führt dazu, dass das Rendern unserer Komponente fehlschlägt.

Lösung

Dies führt zu einem bekannten Konzept: der Migration der Datenbank.

Eine Schemamigration wird für eine Datenbank immer dann durchgeführt, wenn das Schema dieser Datenbank aktualisiert oder auf eine neuere oder ältere Version zurückgesetzt werden muss. Migrationen werden programmgesteuert mithilfe eines Schemamigrationstools (Wikipedia) durchgeführt

LocalStorage ist eine kleine Datenbank mit Schlüsselwertpaaren. Redux Persist macht es wunderschön. Wenn Sie sich ein Projekt ansehen, das mit dieser Bibliothek initialisiert wurde, verwendet es bereits eine Standardversion -1. Werfen Sie einen Blick auf den Screenshot auf der Registerkarte "Anwendung" im Chrome-Entwicklungstool.

localStorage im Chrome Dev Tool

Das ist sehr gut! Die Bibliothek unterhält bereits eine Standardversion für uns, sodass wir die Migrationsfunktion in Zukunft integrieren können.

Der Schlüssel besteht darin, Ihre permanente Konfiguration in Ihrem rootReducer zu konfigurieren.

export const persistConfig = {
  Schlüssel: 'testApp',
  version: 0, // Neue Version 0, Standard oder frühere Version -1
  Lager,
  Debug: wahr,
  stateReconciler: autoMergeLevel2,
  migrate: createMigrate (Migrationen, {debug: true})
}

Es ist wichtig, dass wir die Version auf 0 aktualisieren, damit unser Speicher von -1 auf 0 migriert wird.

Als Nächstes schreiben wir die Migration, um unseren Speicher über ein Update zu informieren.

const migrations = {
  0: (state) => {
    Rückkehr {
      ...Zustand,
      Reifen: {
        ... state.tyre,
        Inhaber: {
          ... state.tyre.owner,
          Einzelheiten: {
            ... state.tyre.owner.details,
            Adresse: "CA" // Neuer Schlüssel für die Migration hinzugefügt
          }
        }
      }
    }
  }
}

Die Migrationen werden dann in unserer oben erwähnten persist-Konfiguration verwendet:

migrate: createMigrate (Migrationen, {debug: true})

Wenn wir also unsere Anwendung neu laden, durchläuft unsere Anwendung eine Abstimmungsphase, in der der Speicher mit dem neu aktualisierten Reduzierer synchronisiert wird.

Fazit

Die obige Konfiguration aktualisiert die Anwendung immer auf der Clientseite, wenn Sie neue Versionen veröffentlichen. Es ist sehr wichtig, dass wir diesbezüglich vorsichtig sind, wenn wir die ersten Offline-Apps erstellen.

Es ist einfach, wenn Sie das grundlegende Konzept und die Technik dafür verstanden haben. Ich hoffe, dieser Artikel hat Ihnen geholfen zu verstehen, wie wichtig es ist, Versionen Ihrer Status im Speicher zu verwalten :)

Folgen Sie mir auf Twitter, um mehr über neue Artikel zu erfahren und über die neuesten Frontend-Entwicklungen auf dem Laufenden zu bleiben. Teilen Sie diesen Artikel auch auf Twitter, damit andere davon erfahren. Teilen kümmert sich ^ _ ^.

Denken Sie daran, Sie können bis zu 50 Mal klatschen, um Ihre Liebe zu duschen!

Einige hilfreiche Ressourcen

  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