SWR 및 MMKV로 기본 영구 캐시 반응

SWR library은 React Native와 잘 작동합니다. 기본적으로 SWR 라이브러리는 글로벌 캐시 저장소를 사용하지만 앱을 다시 로드하면 캐시가 손실됩니다. 다음은 SWR 캐시를 MMKV.과 동기화하는 아주 쉬운 방법입니다.

SWR 캐시 공급자

SWR docs에 따르면 공급자 옵션을 SWR 구성에 전달할 수 있습니다.

import { SWRConfig } from 'swr';

function App() {
  return (
    <SWRConfig value={{ provider: () => new Map() }}>
      <Page/>
    </SWRConfig>
  )
}

캐시 제공자 자체는 다음 TypeScript 정의와 일치하는 맵과 유사한 객체입니다.

interface Cache<Data> {
  get(key: string): Data | undefined
  set(key: string, value: Data): void
  delete(key: string): void
}

기본 SWR 캐시 기능을 확장할 수 있습니다. SWR 팀은 LocalStorage Based Persistent Cache:에 대한 다음 예를 제공했습니다.

function localStorageProvider() {
  // When initializing, we restore the data from `localStorage` into a map.
  const map = new Map(JSON.parse(localStorage.getItem('app-cache') || '[]'))

  // Before unloading the app, we write back all the data into `localStorage`.
  window.addEventListener('beforeunload', () => {
    const appCache = JSON.stringify(Array.from(map.entries()))
    localStorage.setItem('app-cache', appCache)
  })

  // We still use the map for write & read for performance.
  return map
}

React Native 프로젝트에 원하는 다른 스토리지를 사용할 수 있습니다.

MMKV

저는 MMKV.이라는 이름의 작고 쉬운 모바일 키-값 저장소에서 중지했습니다. 문서에 따르면 AsyncStorage보다 30배 빠릅니다.

MMKV 스토리지와 SWR 동기화

react-native-mmkv 라이브러리를 사용했습니다. 빠른 설치:

import { MMKV } from 'react-native-mmkv';

const mmkv = new MMKV();

SWR CacheProvider를 설정해 보겠습니다.

import type { Cache } from 'swr';

const cacheProvider = (cache: Cache) => {
  const swrCache: Cache = {
    get: (key) => {
      const valueFromMap = cache.get(key);

      if (valueFromMap) {
        return valueFromMap;
      }

      if (typeof key === 'string' && mmkv.contains(key)) {
        const value = mmkv.getString(key);
        return value ? JSON.parse(value) : undefined;
      }

      return undefined;
    },
    set: (key, value) => {
      cache.set(key, value);

      if (typeof key === 'string') {
        mmkv.set(key, JSON.stringify(value));
      }
    },
    delete: (key) => {
      cache.delete(key);

      if (typeof key === 'string' && mmkv.contains(key)) {
        mmkv.delete(key);
      }
    },
  };

  return swrCache;
};

보시다시피 delete 및 set 메서드는 매우 간단합니다. get 방법은 MMKV 저장 전에 SWR 캐시에서 데이터를 가져오려고 합니다. 거의 다 왔어. cacheProvider를 SWRConfig에 전달하기만 하면 됩니다.

import { SWRConfig } from 'swr';

function App() {
  return (
    <SWRConfig value={{ provider: cacheProvider }}>
      <Page/>
    </SWRConfig>
  )
}

그게 기본입니다. 매우 쉽고 빠름 ⚡️⚡️⚡️

❗️ 보시다시피 string 키로만 값을 저장하고 있습니다. SWR 키 값이 string /function / array / null.일 수 있으므로 이 기능을 확장할 수 있습니다. SWR conditional fetching options.을 확인하십시오.


를 통해 저에게 연락 주시기 바랍니다. 건배 👋