React Native: AsyncStorage list

0.62.2+

0:00W poprzedniej lekcji udało nam się wykorzystać async storage do zapisu naszego

0:04opisu oraz poziomu no i teraz chcielibyśmy ujarzmić

0:09naszą listę więc przejdźmy sobie do naszej listy

0:13nie do list item tylko do to do list i przede wszystkim

0:18usuńmy sobie to co tutaj utworzyliśmy na początku to

0:24znaczy wróćmy do tego co było na początku czyli po prostu dodawania naszych

0:28elementów tasks current text świetnie

0:32i tutaj załóżmy że nasza

0:37lista jest pusta okej zobaczmy czy to działa coś tam nie działa zaraz to spróbujemy

0:42dźwignąć oczywiście

0:46tutaj coś się zapodziało teraz będzie okej przebuduj

0:50okej no nasza

0:55lista jest pusta dodajmy coś task 1 tak

1:00fajnie nowy task został dodany task new okej

1:08task został dodany no dobra spoko mamy te taski ale

1:12no znowu jeśli odpalimy listę zbudujemy sobie na nowo nasz projekt no to oczywiście

1:16tych danych nie mamy więc chcieliśmy je zapisać zaczniemy sobie od

1:20tego żeby zaimportować nasz async storage from

1:26react native

1:31react native async storage okej

1:35no i w sumie zasada działania

1:39będzie podobna czyli w momencie kiedy dodajemy nowy element to

1:45chcielibyśmy zapisać naszą listę całą czyli

1:52zróbmy sobie klucz na przykład list no i teraz ojejku

1:56przepraszam async storage kropka set item list no

2:00i teraz musimy zapisać naszą listę tasks okej

2:06a tak naprawdę żeby napisać to ładniej to moglibyśmy

2:10sobie napisać use effect który

2:15będzie triggerowany w momencie wywołania

2:19zmiany wartości naszej listy o i w ten sposób będzie to

2:24zapisywane no dobra spróbujmy to zrobić natomiast

2:29znowumamy ten problem to znaczy nasza biblioteka nie obsługuje niczego innego

2:34poza stingami więc musimy jakoś tą listę zamienić na stringa no i

2:38tutaj z pomocą przychodzi nam taka fajna funkcja json stringify i

2:42rzućmy sobie naszego jeszcze nasze taski sprawdźmy

2:47czy teraz akceptowalne hej fajnie

2:53super fajnie

2:58no dobra nasze taski są dodawane przynajmniej tak mi

3:02się wydaje ale oczywiście nie są jeszcze wczytywanie co musimy

3:06zrobić musimy na

3:10starcie przy montowaniu po prostu naszą listę wczytać i działamy

3:14tak samo jak w przypadku danych na profilu czyli async

3:19storage get item list to nam zwraca promis tu

3:23mamy jakis value jeśli mamy to value no

3:28to chcielibyśmy ustawić set tasks no

3:33właśnie ale mamy to w stringu więc musimy odwrócić ten proces

3:37stringify czyli musimy sobie sparsować naszego jsona no

3:43dobra sprawdźmy to nic

3:47się nie wydarzyło hello dzięki

3:52super dzięki new

3:57dzięki no i

4:02mamy tak zapisane zobaczmy czy na androidzie też tak będzie task 1

4:07dzięki task 2

4:11dzięki task 3

4:15dzięki zbudujmy oba projekty od nowa no

4:19super zapisaliśmy naszą listę czyli widzicie sam

4:24async storage jest bardzo prostym narzędziem ale pozwala nam na naprawdę wiele

4:28możemy naszą aplikację po prostu uasynchronicznić

4:33po prostu zoffiline'ować tak pewne rzeczy możemy zapisywać i dokładnie na bazie tego async

4:37storage na tej samej zasadzie działa właśnie redux persist o którym mówiłem

4:41tak widać że to jest wymagane więc możemy poza samym

4:46takim zapisywaniem pojedynczych wartości przy użyciu tego redux persista korzystać

4:50z tego zapisywać cały nasz stan aplikacji ale

4:54jeśli nie mamy takiej potrzeby lub nie korzystamy z reduxa to możemy po prostu sobie pojedyncze rzeczy zapisywać

4:58no i to tyle jeśli chodzi o tą lekcję