React Native에서 useState 후크가있는 useAsyncStorage 사용자 정의 후크

Question

아시다시피 React Native에서는 LocalStorage를 사용할 수 없습니다. 대신 모바일 장치의 로컬 저장소에 데이터를 저장하기 위해 반응하는 LocalStorage 사용자 지정 후크와 동일한 기능을 수행하는 useAsyncStorage 사용자 지정 후크를 만들려고합니다.

useAsyncStorage.js

import React, { useEffect, useState } from 'react';
import AsyncStorage from '@react-native-community/async-storage';


export default function useAsyncStorage(key, defaultValue) {
  const [storageValue, updateStorageValue] = useState(defaultValue);

  useEffect(() => {
    getStorageValue();
  }, []);

  async function getStorageValue() {
    let value = defaultValue;
    try {
      value = (JSON.parse(await AsyncStorage.getItem(key))) || defaultValue;
    } catch (e) {
      // handle here
    } finally {
      updateStorage(value);
    }
  }

  async function updateStorage(newValue) {
    try {
      await AsyncStorage.setItem(key, JSON.stringify(newValue));
    } catch (e) {
      // handle here
    } finally {
      getStorageValue();
    }
  }

  return [storageValue, updateStorageValue];
}

App.js에서 useAsyncStorage.js를 가져 와서 모바일 장치의 로컬 저장소에 데이터를 저장하는 데 사용합니다.

import useAsyncStorage from './useAsyncStorage';

초기화하려면 :

const [userLevel, setUserLevel] = useAsyncStorage("userLevel",1)

setValue :

 setUserLevel(prevLevel => {
   return prevLevel + 1
 })

예상대로 작동하고 데이터를 설정하지만 앱을 다시로드 한 후 AsyncStorage에서 데이터를 검색 할 수 없습니다.

누구든지 도와 주시겠습니까? useAsyncStorage 사용자 지정 후크에서 뭔가 잘못 했나요? 데이터가 AsyncStorage에 저장되지 않는 이유는 무엇입니까?

Answer 1

이 useAsyncStorage구현은 저에게 효과적입니다.

function useAsyncStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState();

  async function getStoredItem(key, initialValue) {
    try {
      const item = await AsyncStorage.getItem(key);
      const value = item ? JSON.parse(item) : initialValue;
      setStoredValue(value);
    } catch (error) {
      console.log(error);
    }
  }

  useEffect(() => {
    getStoredItem(key, initialValue);
  }, [key, initialValue]);

  const setValue = async (value) => {
    try {
      const valueToStore =
        value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      await AsyncStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.log(error);
    }
  };

  return [storedValue, setValue];
}

데모 스낵 링크 :

https://snack.expo.io/@yajana/useasyncstorage

참고:

https://usehooks.com/useLocalStorage/

기타 유사한 구현 :

https://github.com/react-native-hooks/async-storage/blob/master/src/index.js

Answer 2

제가 만든 커스텀 훅을 사용해 볼 수 있습니다.

import { useEffect, useState } from 'react'
import AsyncStorage from '@react-native-async-storage/async-storage'

const useAsyncStorage = (key, initialValue) => {
  const [data, setData] = useState(initialValue)
  const [retrivedFromStorage, setRetrievedFromStorage] = useState(false)

  useEffect(() => {
    ;(async () => {
      try {
        const value = await AsyncStorage.getItem(key)
        setData(JSON.parse(value) || initialValue)
        setRetrievedFromStorage(true)
      } catch (error) {
        console.error('useAsyncStorage getItem error:', error)
      }
    })()
  }, [key, initialValue])

  const setNewData = async (value) => {
    try {
      await AsyncStorage.setItem(key, JSON.stringify(value))
      setData(value)
    } catch (error) {
      console.error('useAsyncStorage setItem error:', error)
    }
  }

  return [data, setNewData, retrivedFromStorage]
}
export default useAsyncStorage

retrievedFromStorage를 사용하여 데이터가 AsyncStorage에서 성공적으로 검색되었는지 확인할 수도 있습니다.

Answer 3

나는 이것이 나를 위해 작동한다는 것을 알았다.

import { useEffect, useState } from 'react';
import AsyncStorage from '@react-native-community/async-storage';

export default function useAsyncStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(initialValue);
  useEffect(() => {
    AsyncStorage.getItem(key)
      .then(value => {
        if (value === null) return initialValue;
        return JSON.parse(value);
      })
      .then(setStoredValue)
  }, [key, initialValue]);

  const setValue = value => {
    const valueToStore = value instanceof Function ? value(storedValue) : value;
    setStoredValue(valueToStore);
    AsyncStorage.setItem(key, JSON.stringify(valueToStore));
  }

  return [storedValue, setValue];
}

참고: https://gist.github.com/msukmanowsky/08a3650223dda8b102d2c9fe94ad5c12