W poprzednim wpisie: React Native editable list pokazałam, jak można edytować dane pojedynczego elementu listy. Edytowane dane zapisane zostały do stanu komponentu, co pozwoliło wyświetlić je na ekranie. Jednak po zamknięciu aplikacji dane resetują się i nie zostają zapamiętane. Jak to zmienić? Z pomocą przyjdzie AsyncStorage.

React native AsyncStorage

AsyncStorage to miejsce w aplikacji, które przechowuje dane i do którego możemy się w każdej chwili odwołać. Działa asynchronicznie, a dane w nim przechowywane są globalne. Od stanu komponentu różni się między innymi tym, że pamięta dane nawet po zamknięciu aplikacji.

Zanim użyjemy AsyncStorage, musimy dokonać importu:

import {..., AsyncStorage } from 'react-native';

Funkcja setDataToAsyncStore zapisuje dane do AsyncStorage w postaci stringu, a funkcja getDataFromAsyncStore odczytuje dane. Jeśli dane nie istnieją, wtedy do pamięci zapisywane są dane domyślne. Za każdym razem po odczytaniu danych (i zmianie ich zapisu ze stringu do pierwotnej formy) funkcja getDataFromAsyncStore zapisuje ich stan w state komponentu, skąd są odczytywane i renderowane przez komponent.

Zapisywanie danych w AsyncStorage

setDataToAsyncStore = async () => {
        try {
            let data = this.state.data;
            await AsyncStorage.setItem('data', JSON.stringify(data));        
        } catch (error) {
            console.log('AsyncStorage set data error in List component', error.message)
        }
    } 

Pobieranie danych z AsyncStorage

getDataFromAsyncStore = async () => {
        try {
            let data = await AsyncStorage.getItem('data');
            if (data === null) {
                data = this.initData
                // saving data as string
                await AsyncStorage.setItem('data', JSON.stringify(data)                 );
                this.setState({ data: data })
                return
            }
            data = JSON.parse(data);
            this.setState({ data: data })
        } catch (error) {
            console.log('AsyncStorage get data error in List component', error.message)
        }
     }

Funkcję getDataFromAsyncStore można wywołać np. w konstruktorze lub w metodzie componentDidMount(), aby po każdym uruchomieniu aplikacji do stanu komponentu zapisywane były dane z pamięci AsyncStorage.

 
export default class MyClass extends Component {
    constructor(props) {
        super(props);
       this.initData = [
         {id: 1, text: 'Some Text 1'},
         {id: 2, text: 'Some Text 2'}, 
         {id: 3, text: 'Some Text 3'}, 
       ]  
        this.state = {
            data: this.initData,
        };
        this.getDataFromAsyncStore();
    } 
...
}

or

componentDidMount() {
   this.getDataFromAsyncStore();
}

AsyncStorage multiSet

A co w przypadku, kiedy chcielibyćmy „hurtowo” odczytać lub zapisać dane do AsyncStorage? Posłużą do tego metody multiGet, mutliSet i getAllKeys.

Jeśli chcemy zapisać kilka kluczy i odpowiadających im wartości, zastosujemy taki zapis:

keys = [['test1', 'value for test1 key'], ['test2', 'value for test2 key']]
AsyncStorage.multiSet(keys, () => {
   console.log('Saved data with multiset method')
} );   

AsyncStorage multiGet

W przypadku, gdy chcemy pobrać wszystkie klucze, jakie zapisane są w AsyncStorage, wystarczy wpisać:

AsyncStorage.getAllKeys() // getting All Keys

Natomiast aby pobrać konkretne klucze oraz ich wartości, zastosujemy zapis:

let keys = ['test1', 'test2'];
AsyncStorage.multiGet(keys, (err, stores) => {
    stores.map((result, i, store) => {
    // get at each store's key/value so you can work with it
    let key = store[i][0];          // shows key
    let value = store[i][1];        // shows value
    let multiget = result;          // shows key and value
    // Do something with result
    });
});

W powyższym przypadku pobieramy sam klucz (let key), samą wartość (let value), lub parę klucz-wartość (let multiget) i możemy je wykorzystać, np. do zapisania ich w stanie komponentu.

AsyncStorage multiRemove

A jak usunąć wiele kluczy razem z ich wartościami? Tak:

let keys = ['test1', 'test2'];
AsyncStorage.multiRemove(keys, (err) => {
  // keys test1 & test2 removed, if they existed
  // do most stuff after removal (if you want)
     console.log('all keys removed');
});

Więcej na temat AsyncStorage znajdziesz w dokumentacji.