रिएक्ट नेटिव में यूज़स्टेट हुक के साथ यूसेजइंस्टॉस्टोरेज कस्टम हुक

Question

जैसा कि हम जानते हैं, हम अभिक्रिया मूल में 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)

सेट करने के लिए:

 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

यदि आप डेटा को 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