新しいバージョンにZustandローカル貯蔵店を移す方法

Zustandは、反応アプリのための州管理ソリューションです.誰にとっても、非常に直感的な、非常に直感的で、私は非常にそれを使用することをお勧めします.I personally love it .
このガイドでは、Zustandの基本的な知識があると仮定します.

リッピングLocalStorage永続性

Zustand APIには、ローカルストレージにストアを永続的にするミドルウェアです.この持続性がどのように見えるかの例です(例: docsから直接取った例).

export const useStore = create(persist( (set, get) => ({ fishes: 0, addAFish: () => set({ fishes: get().fishes + 1 }) }), { name: "food-storage", // unique name getStorage: () => sessionStorage, // (optional) by default the 'localStorage' is used } ))

Persistence関数は、ストアをラップし、自動的にローカルストレージ内の値を設定します.ストアの全体は、オプションで設定することができるキー(名前)とバージョン(番号)によってローカルストレージで識別することができます.これらのオプションは、persist関数で設定できます最初に、Zipstand店を受け取ります、そして、第2のパラメタは上記の構成オブジェクトです.
ローカルストレージに永続化されているストアを作成中にポップアップすることができます問題は、ストアの構造がアプリケーションにアップデートで変更できることです.これは、ストアが期待するものと現在存続しているものの間の矛盾を引き起こす可能性があります.
これは最悪の場合、アプリケーションがクラッシュする原因となるエラーが発生します.イクス!この問題を回避するために、永続的なストアを新しいバージョンに移行するための移行機能を提供します.

シナリオ

たとえば、私たちの店が現在このように見えると仮定しましょう:

const AVAILABLE_FISHES = [{ id: 1, name: 'Tuna', }, { id: 2, name: 'Goldfish', }] export const useStore = create(persist( (set, get) => ({ fishes: [{ id: 1, name: 'Tuna' }], addAFish: () => set({ fishes: get().fishes + 1 }) }), { name: "food-storage", // unique name } ))

私たちの魚のキーは、直接AurabableRes魚の定数に存在する魚にリンクする必要があります.
しかし、我々が問題を抱えているならば、我々が保存する魚のオブジェクト構造が変わらないならば、永続化された店の対応するオブジェクトは更新されません.例えば、現在恒常的に使用される魚定数が色を含んでいる場合、

const FISHES = [{ id: 1, name: 'Tuna', color: 'Blue', }, { id: 2, name: 'Goldfish', color: 'Gold', }]

オブジェクトは、もはや魚のキーに保存されたすべての情報が必要です.これは簡単に新しい構造とバージョンにストアを移行することによって改善することができます.

移行

まず、ローカルストレージのバージョンを0にする.これは、devツールを開いてローカルストレージのエントリを見て確認できます.


Zustandが新しいストアバージョンを検出するためには、Persistence Configurationオブジェクト内に設定する必要があります.

export const useStore = create(persist( (set, get) => ({ fishes: [{ id: 1, name: 'Tuna' }], addAFish: () => set({ fishes: get().fishes + 1 }) }), { name: "food-storage", // unique name version: 1, migrate: (persistedState) => { // Migrate store here... } } ))

一旦Zustandがバージョンストア1が永続化されたストア0より優れているとわかるならば、それは提供された機能で店を移行しようとします.
この関数は持続的なローカルストレージ状態をパラメータとして受け取り、新しいストアを返すことを期待します.
我々の例に戻って、我々は魚のオブジェクトではなく、排他的にIDに我々の店をリンクしなければなりません.

migrate: (persistedState) => { const oldFishes = persistedState.fishes; const newFishes = oldFish.map((oldFish) => { return oldFish.id; }) return newFishes; }

そして、これで新しいオブジェクト構造は正しいです、そして、ユーザーがウェブページをロードするとすぐに、それは自動的にその店を新しいバージョンに移行させます.
新しい変更をする必要があるときはいつでも、それは簡単にバージョンを上げて、migrate機能を更新することによってされることができます.
そして、それ!この情報は役に立ちましたか.あなたはZustand店を移行することができましたか?以下のコメントで私に知らせてください.
元亀2年(1821年)8月19日、元来https://relatablecode.com年.