Tilan synkronointi localStoragen kanssa

Ensimmäinen ajatus voi olla lukea localStoragea yhdessä paikassa ja kirjoittaa siihen toisessa, mutta nämä voivat ajautua erilleen. Virheitä syntyy, jos tilapäivityksiä ei tallenneta tai tallennettuja arvoja ei välitetä tilaan.

Tarvitset yhden totuuden lähteen, joka pitää React-tilan ja tallennustilan jatkuvasti synkronoituna.

Siisti ratkaisu on useLocalStorage-hook, joka käärii useState-hookin ja tallentaa muutokset automaattisesti. Se palauttaa arvon ja asettajan aivan kuten useState.

Komponentit käyttävät sitä täsmälleen tavallisen tilan tapaan, mutta saavat pysyvyyden automaattisesti.

localStoragen lukeminen on synkroninen operaatio, joten sitä ei pidä tehdä jokaisella renderöintikerralla. Välitä useState-hookille funktio eli laiska alustaja, jolloin luku tehdään vain kerran komponentin alustamisen yhteydessä.

Funktion sisällä jäsennetään tallennettu arvo tai palautetaan annettu oletusarvo.

Jos lasket alkutilan suoraan argumentiksi, lauseke suoritetaan jokaisella renderöintikerralla, vaikka sen tulosta käytetään vain ensimmäisellä kerralla. Funktion kanssa React kutsuu sitä vain kerran.

localStorage-lukujen yhteydessä tämä estää toistuvan synkronisen työn pääsäikeessä jokaisella renderöintikerralla.

Tallenna päivitykset lisäämällä useEffect, joka suoritetaan aina arvon muuttuessa ja kutsuu komentoa localStorage.setItem(key, JSON.stringify(value)).

Kun arvo lisätään riippuvuustaulukkoon, jokainen tilanmuutos kirjoitetaan automaattisesti tallennustilaan.

Kun asetat arvon edellisen arvon perusteella, käytä funktionaalista muotoa setValue(prev => prev + 1). Näin vältät vanhentuneet sulkeumat, joissa kirjoitettaisiin vanha talteen otettu arvo.

Tämä on erityisen tärkeää tapahtumankäsittelijöissä ja efekteissä, jotka voivat säilyttää vanhentuneen tilannekuvan.

getItem palauttaa arvon null, jos avainta ei ole olemassa. Alustajan on tunnistettava tämä ja käytettävä oletusarvoa sen sijaan, että se yrittäisi jäsentää null-arvon.

Tarkistus kuten stored != null ? JSON.parse(stored) : defaultValue käsittelee ensimmäisen käyttökerran hallitusti.

TypeScriptissä hookista tehdään geneerinen: function useLocalStorage<T>(key: string, initial: T). Näin arvon tyyppi säilyy, ja hookin käyttäjät saavat täyden tyyppiturvallisuuden.

Palautettu monikko tyypitetään muodossa [T, Dispatch<SetStateAction<T>>], kuten useState.

Tietojen rakenne muuttuu ajan mittaan, ja vanhat tallennetut arvot voivat rikkoa uuden koodin. Tallenna tietojen rinnalle versionumero, jotta voit tunnistaa vanhentuneet muodot.

Tallenna esimerkiksi { version: 2, data } ja vertaa versiota lukemisen yhteydessä.

Kun tallennettu versio ei vastaa nykyistä versiota, hylkää vanha arvo tai siirrä se uuteen muotoon sen sijaan, että luottaisit siihen. Yksinkertaisin strategia on poistaa vanhentunut merkintä ja käyttää oletusarvoja.

Tämä estää sovelluksen vanhemman version kirjoittamien tietojen aiheuttamat kaatumiset.

Täydellinen useLocalStorage yhdistää laiskan alustajan, joka lukee ja jäsentää tiedot turvallisesti, funktionaalisia päivityksiä tukevan asettajan sekä versioituna kirjoittavan useEffect-hookin.

Tuloksena on suoraan käyttöön sopiva useState-korvaaja, joka säilyy uudelleenlatausten yli.

Opit rakentamaan useLocalStorage-hookin laiskalla alustajalla, tallentamaan muutokset useEffect-hookin avulla, käyttämään funktionaalisia päivityksiä vanhentuneiden sulkeumien välttämiseksi ja käsittelemään null-arvoja.

Näimme myös TypeScriptin geneeriset tyypit ja versioinnin vanhentuneiden tietojen turvallista poistamista varten.