React Native Academy · Oppitunti

Zustand-tilan säilyttäminen AsyncStoragella

Ympäröikää Zustand-store AsyncStoragen tukemalla persist-middlewarellä, jotta tila säilyy sovelluksen uudelleenkäynnistyksissä, ja käsitelkää rehydraation ajoitus.

Oppitunti 3/413 vaihetta

Zustand-tilan säilyttäminen AsyncStoragella on ilmainen React Native Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu React Native Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Native Academy-kurssilla on yhteensä 4 oppituntia.

Miksi tila kannattaa säilyttää?

Oletusarvoisesti Zustandin tila säilyy vain muistissa ja katoaa sovelluksen sulkeutuessa. Tilan säilyttäminen tarkoittaa sen tallentamista laitteen paikalliseen tallennustilaan, jotta se säilyy sovelluksen uudelleenkäynnistyksissä. Tämä on tärkeää käyttäjäasetuksille, todennustunnisteille, ostoskorille ja kaikille tiedoille, joiden käyttäjä odottaa olevan tallella avatessaan sovelluksen uudelleen.

AsyncStoragen asentaminen

AsyncStorage on React Nativen vakiomuotoinen avain–arvo-tallennuksen ohjelmointirajapinta. Asennettuun Expo-työnkulkuun community-paketti asennetaan komennolla @react-native-async-storage/async-storage. Zustandin sisäänrakennettu persist-middleware toimii minkä tahansa tallennussovittimen kanssa, ja AsyncStorage on mobiilisovellusten yleisin valinta.

npx expo install @react-native-async-storage/async-storage

persist-middlewareen lisääminen

Käärikää storen luoja zustand/middleware-moduulista tuodulla persist-middlewarella. Välittäkää sille storen tehdasfunktio ja määritysobjekti, jossa on name-avain (AsyncStoragen avain, johon tila tallennetaan) ja storage-avain (joka viittaa AsyncStorage-sovittimeen). Zustand hoitaa lukemisen ja kirjoittamisen automaattisesti.

import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';
import AsyncStorage from '@react-native-async-storage/async-storage';

export const useSettingsStore = create(
  persist<SettingsStore>(
    (set) => ({
      theme: 'light',
      notifications: true,
      setTheme: (theme) => set({ theme }),
      toggleNotifications: () =>
        set((state) => ({ notifications: !state.notifications })),
    }),
    {
      name: 'settings-store',
      storage: createJSONStorage(() => AsyncStorage),
    }
  )
);

Persist-toiminnon sisäinen toiminta

Kun store luodaan ensimmäisen kerran, persist lukee AsyncStoragesta aiemmin tallennetun tilan ja hydratoi sen eli palauttaa sen ennen ensimmäisen komponentin renderöintiä. Kun tila muuttuu set-funktion kautta, persist sarjallistaa tilan automaattisesti JSON-muotoon ja kirjoittaa sen asynkronisesti AsyncStorageen. Kaikki tämä tapahtuu ilman komponentteihin tarvittavaa lisäkoodia.

Hydraation viiveen käsitteleminen

AsyncStorage-lukeminen on asynkronista, joten ensimmäisellä renderöintikerralla store saattaa sisältää vielä alkutilan ennen hydraation valmistumista. Zustandin persist-middleware lisää _hasHydrated-lipun ja onFinishHydration-callbackin. Näiden avulla voitte näyttää latausnäytön, kun säilytettyä tilaa ladataan levyltä.

const hasHydrated = useSettingsStore((state) => state._hasHydrated);

if (!hasHydrated) {
  return <ActivityIndicator />; // Show loading until store is ready
}

// Alternatively, listen to hydration completion:
useEffect(() => {
  const unsub = useSettingsStore.persist.onFinishHydration(() => {
    setReady(true);
  });
  return unsub;
}, []);

Vain osan tilasta säilyttäminen

Usein ette halua säilyttää storeen tallennettuna kaikkea — esimerkiksi tilapäisiä lataustiloja tai virheilmoituksia ei pidä tallentaa. Valitkaa partialize-option avulla säilytettävät kentät. Palautettu olio sisältää vain ne avaimet, jotka haluatte kirjoittaa AsyncStorageen.

persist<AuthStore>(
  (set) => ({
    user: null,
    token: null,
    isLoading: false,    // transient — don't persist
    error: null,         // transient — don't persist
    login: (user, token) => set({ user, token }),
    logout: () => set({ user: null, token: null }),
  }),
  {
    name: 'auth-store',
    storage: createJSONStorage(() => AsyncStorage),
    partialize: (state) => ({ user: state.user, token: state.token }),
  }
)

Versiointi ja migraatio

Kun muutatte säilytetyn tilan rakennetta sovelluksen uudessa julkaisussa, käyttäjien laitteilla olevat vanhat tiedot eivät välttämättä vastaa uutta rakennetta. Päivittäkää tallennettu tila versiosta toiseen version- ja migrate-optioiden avulla. Kasvattakaa version-arvoa jokaisen rakenteellisen muutoksen yhteydessä ja käsitelkää vanha tila migrate-funktiossa.

persist<SettingsStore>(
  (set) => ({ /* ... */ }),
  {
    name: 'settings-store',
    storage: createJSONStorage(() => AsyncStorage),
    version: 2,
    migrate: (persistedState: any, version: number) => {
      if (version === 1) {
        // Rename darkMode to theme in version 2
        persistedState.theme = persistedState.darkMode ? 'dark' : 'light';
        delete persistedState.darkMode;
      }
      return persistedState;
    },
  }
)

Säilytetyn tilan tyhjentäminen

Tyhjentäkää säilytetty tila esimerkiksi käyttäjän kirjautuessa ulos kutsumalla useStore.persist.clearStorage(). Tämä poistaa tiedot AsyncStoragesta. Voitte kutsua myös useStore.getState().reset()-funktiota tyhjentääksenne samalla muistissa olevan tilan. Molempien kutsuminen varmistaa, että käyttäjä aloittaa puhtaalta pöydältä sovelluksen seuraavalla käynnistyskerralla.

async function handleLogout() {
  // Clear in-memory state
  useAuthStore.getState().logout();

  // Clear persisted state from AsyncStorage
  await useAuthStore.persist.clearStorage();

  navigation.reset({ index: 0, routes: [{ name: 'Login' }] });
}

SecureStoren käyttäminen arkaluonteisille tiedoille

Suosikaa arkaluonteisille arvoille, kuten todennustunnisteille, Expo SecureStorea tavallisen AsyncStoragen sijaan. SecureStore käyttää laitteen suojattua aluetta (iOS Keychain / Android Keystore) levossa olevien tietojen salaamiseen. Voitte luoda mukautetun Zustand-tallennussovittimen SecureStoren getItemAsync- ja setItemAsync-metodien avulla.

import * as SecureStore from 'expo-secure-store';

const secureStorage = {
  getItem: async (name: string) => await SecureStore.getItemAsync(name),
  setItem: async (name: string, value: string) =>
    await SecureStore.setItemAsync(name, value),
  removeItem: async (name: string) =>
    await SecureStore.deleteItemAsync(name),
};

// Use secureStorage instead of AsyncStorage:
storage: createJSONStorage(() => secureStorage),

Säilytetyn tilan virheenkorjaus

Voitte tarkastella AsyncStorageen tallennettuja tietoja kehityksen aikana kutsumalla AsyncStorage.getAllKeys()- ja AsyncStorage.multiGet(keys)-funktioita kehityskonsolissa tai virheenkorjausnäytössä. Voitte myös poistaa vanhentuneen säilytetyn tilan manuaalisesti AsyncStorage.clear()-kutsulla siirtologiikkaa testatessanne. Testatkaa aina tuoreella asennuksella simuloidaksenne todellisia käyttäjän päivitystilanteita.

// Debug helper — call from a dev-only screen
async function printStorage() {
  const keys = await AsyncStorage.getAllKeys();
  const pairs = await AsyncStorage.multiGet(keys);
  pairs.forEach(([key, value]) => {
    console.log(key, ':', JSON.parse(value ?? 'null'));
  });
}

Säilytetyn Cart-storen esimerkki

Tässä on realistinen cart-store, joka säilyttää tuotelistansa sovelluksen uudelleenkäynnistysten yli. Lataus- ja virhetila jätetään säilytyksen ulkopuolelle partialize-option avulla. total johdetaan komponentissa lennossa sen sijaan, että se tallennettaisiin, joten se vastaa aina items-taulukkoa hydraation jälkeen.

export const useCartStore = create(
  persist<CartStore>(
    (set, get) => ({
      items: [],
      addItem: (item) => set((state) => ({ items: [...state.items, item] })),
      removeItem: (id) =>
        set((state) => ({ items: state.items.filter((i) => i.id !== id) })),
      clearCart: () => set({ items: [] }),
    }),
    {
      name: 'cart-store',
      storage: createJSONStorage(() => AsyncStorage),
      partialize: (state) => ({ items: state.items }),
    }
  )
);

Pikatarkistus

Testatkaa, miten hyvin ymmärrätte tämän oppitunnin React Native -mobiilikehityksen käsitteet.

Vastaa interaktiivisessa oppitunnissa

Oppitunnin kertaus

Tässä oppitunnissa opitte, että persist-middleware käärii Zustand-storen ja tallentaa sekä palauttaa tilan AsyncStoragesta automaattisesti, partialize määrittää, mitkä kentät säilytetään, jotta tilapäisiä lataus- tai virhetiloja ei tallenneta, ja version yhdessä migraten kanssa käsittelee tilan rakenteen rikkovat muutokset sovelluspäivitysten välillä. Seuraavaksi tutustumme Zustandin slices-malliin ja Devtools-integraatioon.

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 30
Oppitunnit: 120

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Zustand-tilan säilyttäminen AsyncStoragella” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa React Native Academy-oppimispolun 3 oppituntia, myös oppitunnin “Zustand-tilan säilyttäminen AsyncStoragella”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. React Native Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Zustand-tilan säilyttäminen AsyncStoragella”?

Ympäröikää Zustand-store AsyncStoragen tukemalla persist-middlewarellä, jotta tila säilyy sovelluksen uudelleenkäynnistyksissä, ja käsitelkää rehydraation ajoitus. Harjoittelet React Native Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni React Native Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin React Native Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”Zustand-tilan säilyttäminen AsyncStoragella”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä React Native Academy-oppitunnilla?

Kyllä. Jokainen React Native Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Zustand-storen luominen
Storen tilan lukeminen ja päivittäminen komponenteissa
Zustand-tilan säilyttäminen AsyncStoragella
Slices-malli ja Devtools-integraatio

← Takaisin: React Native Academy