Как я изучил AsyncStorage |

Обо мне

Я бывший консультант Accenture, одной из самых престижных консалтинговых фирм в мире. Я помогал клиентам, включая Google, 3M и Cisco, автоматизировать бизнес-аналитику.

В настоящее время я следую своей страсти к разработке приложений, используя ReactJS, React Native, NodeJS и PostgreSQL. Я использую комбинацию этих и других фреймворков для создания потрясающих приложений для клиентов.

Почему я хотел изучить AsyncStorage

Я хотел узнать о сохранении данных, в частности, чтобы пользователю не приходилось входить в систему каждый раз, когда он или она повторно входит в приложение. Это то, что требуется для большинства, если не для всех приложений, чтобы оптимизировать взаимодействие с пользователем. Крайне важно, чтобы разработчик приложения знал о сохранении данных и инструментах, доступных для этой функции. В этом сценарии я использовал его в основном для сохранения данных пользователей. Однако есть варианты использования, которые выходят за рамки простого сохранения пользовательских данных.

Как я подошел к изучению AsyncStorage

Для этого конкретного проекта я использовал React Native, так как это мое любимое оружие при создании мобильных приложений. Есть много вариантов, включая redux-persist и AsyncStorage. AsyncStorage намного компактнее, потому что redux-persist требует использования redux. Хотя я использую избыточность во всех своих приложениях для управления состоянием, я хотел решить проблему с помощью простого решения. Кроме того, он имел сходство с LocalStorage, который обычно используется внутри браузера.

Основные понятия

Первый шаг — сохранить данные с помощью AsyncStorage. Каждый раз, когда используется AsyncStorage, нам нужно импортировать функцию следующим образом:

import { AsyncStorage } from 'react-native';

После этого мы можем использовать метод setItem для сохранения данных:

AsyncStorage.setItem('user', JSON.stringify(response.data.customer), () => {
  callback(response.data.customer);
});

Часть ответа указывает, что это делается после того, как данные были получены API. В приведенном выше примере response.data.customer представляет объект клиента, полученный приложением. Мы видим, что данные были сохранены под именем «пользователь». Функция обратного вызова вызывается, чтобы сообщить нашему глобальному уровню управления состоянием (redux), что мы получили объект клиента.

Чтобы получить объект данных, который был сохранен, мы можем использовать следующий код в приложении:

const user = AsyncStorage.getItem('user');

В приведенном выше примере мы просто объявляем пользовательскую переменную и присваиваем ей значение, полученное из метода getItem для элемента user, которое мы ранее установили с помощью данных клиента из API. Это так просто!

Последнее, что нам нужно понять, это как удалить эти данные:

AsyncStorage.removeItem('user', () => {
  callback();
});

Мы просто используем метод «removeItem», чтобы удалить элемент «пользователь», который мы установили ранее. Обратный вызов обычно вызывается для уведомления о глобальном состоянии (в нашем случае — о сокращении).

Проблемы, с которыми я столкнулся

Основной проблемой, с которой я столкнулся при определении того, какой тип данных я должен сохранять, была проблема безопасности. Это связано с тем, что эти данные могут быть легко доступны на жестком диске iPhone или Android-устройства. Простое решение состоит в том, что любые конфиденциальные данные не будут запрашиваться у API для той части, которая сохраняется на жестком диске.

Основные выводы

Ключевым выводом было то, что сохранение данных является РЕШАЮЩИМ при разработке удобного для пользователя приложения. В эпоху пользовательского опыта сохранение пользовательских данных является базовым, но ключевым компонентом любого React Native — или React, если уж на то пошло — приложения.

Советы и советы

Как часть документации React Native, документация подробно описывает, как используется эта функция React Native:

Заключительные мысли и следующие шаги

Чтобы изучить идею сохранения данных в приложении React Native, redux-persist — полезный инструмент, дополняющий пакет redux. Кроме того, для AysncStorage существует ограничение в 6 МБ на устройствах Android; поэтому redux-persist является жизнеспособным решением, если данные должны сохраняться за пределами 6 МБ на устройствах Android. Это может работать, потому что redux-persist может подключаться к типам хранилища, размер которых превышает 6 МБ. Тем не менее, следует предупредить, что некоторые из этих типов хранилищ содержат ошибки, но их стоит изучить в качестве потенциальных долгосрочных решений.