O que é AsyncStorage no React Native e como usá-lo?

O AsyncStorage do React Native simplifica o armazenamento e a persistência de dados em um aplicativo React Native. Com a API AsyncStorage, você pode lidar com casos simples de pequenos dados em seu aplicativo sem a necessidade de armazenamento local do dispositivo ou sistemas de armazenamento complexos.

O que é o AsyncStorage do React Native?

A API AsyncStorage é um sistema de armazenamento de chave-valor persistente. A API oferece suporte a uma variedade de tipos de dados JavaScript, incluindo objetos string, booleanos, numéricos e JSON.

Os dados armazenados usando AsyncStorage persistem e permanecerão disponíveis mesmo se o aplicativo for fechado ou o dispositivo for reiniciado. Isso torna o AsyncStorage uma solução de armazenamento ideal para armazenar dados em cache e armazenar pequenas quantidades do estado do aplicativo.

Qual problema o AsyncStorage está resolvendo?

Antes do advento do AsyncStorage, o cache de dados adequado era um esforço não confiável. Você pode armazenar dados no armazenamento local, que não consegue manter os dados quando o aplicativo é fechado, ou pode armazenar os dados em um Sistema de gerenciamento de banco de dados relacional (RDBMS). Mas eles são muito complexos para operar neste caso de uso.

O AsyncStorage resolve esses problemas fornecendo uma maneira simples e confiável de armazenar dados pequenos e temporários em aplicativos React Native.

Para armazenar dados com AsyncStorage, os dados são primeiro serializados em uma string JSON. A string JSON é armazenada em um sistema de chave-valor. Quando você tenta recuperar dados do AsyncStorage, os dados são desserializados do JSON e retornados a você em seu formato original.

Estes são programas assíncronos que são executados sem bloquear o thread principal do JavaScript. Tornando-o ideal para armazenar dados que precisam de acesso frequente, como configurações do usuário e estado do aplicativo.

Métodos AsyncStorage

Para instalar o react-native-async-storage package, execute o seguinte comando dentro do terminal do seu projeto:

npm install @react-native-async-storage/async-storage

Como AsyncStorage é assíncrono por natureza, seus métodos não retornarão resultados imediatamente. Em vez disso, eles retornam uma promessa que resolve quando a operação é concluída.

Você deve usar o assíncrono/aguardando sintaxe ou uma técnica semelhante ao chamar métodos AsyncStorage.

Gravar dados usando os métodos setItem() e multiSet()

O setItem() e multiSet() métodos são usados ​​para definir os valores para a chave fornecida. Esses métodos aceitam a chave e os valores como parâmetros.

O método retornaria uma promessa que resolve com um valor booleano indicando se a operação foi bem-sucedida ou rejeita com um erro se a operação falhou:

// Salva um valor para a chave "user"
aguardam AsyncStorage.setItem('do utilizador', 'John');
// Salve vários valores para a chave "user"
aguardam AsyncStorage.multiSet(['do utilizador', 'John', 'corça']);

Ler dados usando os métodos getItem() e multiGet()

Com o getItem() método, você pode extrair dados salvos do armazenamento usando a chave para o valor que deseja obter. Se a chave passada não existe, a promessa é rejeitada com erro:

const nome = aguardam AsyncStorage.getItem('do utilizador');

O valor retornado por getItem() é uma corda. Se você precisar armazenar dados em outro formato, poderá usar JSON.stringify() para converter os dados em uma string antes de armazená-los. Então use JSON.parse() para converter a string de volta para o tipo de dados original ao recuperá-la.

Por exemplo:

// Salve o objeto {nome: "John Doe", idade: 30} para a chave "usuário"
aguardam AsyncStorage.setItem('do utilizador', JSON.stringify({nome: "John Doe", idade: 30}));
// Obtém o objeto para a chave "user"
const usuário = JSON.parse(aguardam AsyncStorage.getItem('do utilizador'));

Você também pode usar o multiGet() método para extrair vários pares chave-valor. O método receberá um array de chaves que devem ser strings.

Mesclar dados usando os métodos mergeItem() e multiMerge()

O mergeItem() e multiMerge() Os métodos mesclam o valor fornecido com o valor existente para a chave especificada. O valor passado para mergeItem() pode ser qualquer tipo de dado. No entanto, é importante observar que o AsyncStorage não criptografa os dados, portanto, qualquer pessoa com acesso ao dispositivo pode ler os dados:

aguardam AsyncStorage.mergeItem('nome', 'Jane Doe');

mergeItem() pega a chave para o valor que você deseja mesclar e o novo valor que deseja mesclar com o valor existente da chave. Usar multiMerge() para mesclar mais de um item a um valor de chave.

Limpar armazenamento usando o método clear ()

O claro() O método permite remover todos os itens armazenados em AsyncStorage. Pode ser útil em vários cenários, como quando você precisa redefinir o estado do aplicativo durante o logout do usuário ou limpe os dados em cache do seu celular.

Por exemplo:

const clearData = assíncrono () => {
tentar {
aguardam AsyncStorage.clear();

 } pegar (e) {
console.erro (e);
 }
};

O código acima excluirá todos os pares chave-valor armazenados em AsyncStorage.

Além disso, você pode fornecer uma função de retorno de chamada para claro(), que será invocado assim que a operação for concluída:

AsyncStorage.clear()
 .então(() => {
// Operação de limpeza concluída

 })
 .pegar((erro) => {
console.erro (erro);
 });

Observe que o claro() O método excluirá permanentemente todos os dados armazenados no AsyncStorage.

Cache de dados com AsyncStorage

O cache de dados é uma prática comum no desenvolvimento de aplicativos móveis para melhorar o desempenho e reduzir as solicitações de rede. Com o AsyncStorage, você pode facilmente armazenar dados em cache em aplicativos React Native.

Quando você acessa um dado, primeiro os dados são verificados para ver se já estão no cache. Se for, os dados serão retornados do cache. Caso contrário, o programa recupera os dados do local de armazenamento mais permanente e os armazena no cache. Na próxima vez que você acessar os dados, eles serão retornados do cache.

Suponha que você tenha um aplicativo que exibe uma lista de livros obtidos de uma API. Para melhorar o desempenho, você pode armazenar em cache os dados do livro buscado usando AsyncStorage.

Aqui está um exemplo de implementação disso:

const [livros, setLivros] = useState([]);
useEffect(() => {
const buscarLivros = assíncrono () => {
tentar {
// Verifica se os dados em cache existem
const dados em cache = aguardam AsyncStorage.getItem('livros em cache');
se (dados em cache !== nulo) {
// Se os dados em cache existirem, analise e defina-os como o estado inicial
 conjunto de livros(JSON.parse (cachedData));
 } outro {
// Se os dados em cache não existirem, busque os dados da API
const resposta = aguardam buscar(' https://api.example.com/books');
const dados = aguardam resposta.json();
// Cache os dados buscados
aguardam AsyncStorage.setItem('livros em cache', JSON.stringify (dados));
// Define os dados buscados como o estado inicial
 setBooks (dados);
 }
 } pegar (erro) {
console.erro (erro);
 }
 };
 buscarLivros();
 }, []);

Neste exemplo, você usa o useEffect gancho para buscar os dados do livro. Dentro do buscarlivros função, verifique se os dados em cache existem chamando AsyncStorage.getItem('cachedBooks'). Se os dados em cache existirem, analise-os usando JSON.parse e defina-o como o estado inicial usando conjunto de livros. Isso permite que você exiba os dados em cache imediatamente.

Se os dados em cache não existirem, busque os dados da API usando o método fetch(). Depois que os dados forem retornados, armazene-os em cache chamando AsyncStorage.setItem(). Em seguida, defina os dados buscados como o estado inicial, garantindo que outras renderizações exibam os dados buscados.

Agora você pode exibir os livros em cache assim:

importar Reagir, { useEffect, useState } de'reagir';
importar { Ver, Texto, FlatList } de'reagir nativo';
importar AsyncStorage de'@react-native-async-storage/async-storage';
const aplicativo = () => {
retornar (

Lista de livros</Text>
 data={livros}
 keyExtractor={(item) => item.id.toString()}
 renderItem={({ item }) => (

{item.title}</Text>
{item.autor}</Text>
 </View>
 )}
 />
 </View>
 );
};
exportarpadrão Aplicativo;

Outras inicializações de aplicativos ou recargas de tela exibirão os dados em cache sem fazer solicitações de API desnecessárias.

Usando AsyncStorage para Carregamento Dinâmico de Dados

O React Native AsyncStorage oferece uma solução poderosa para armazenar e recuperar dados. Aproveitando os recursos de cache, ele aprimora o desempenho e fornece acesso mais rápido aos dados armazenados.

Ao combinar o conhecimento de AsyncStorage com técnicas como paginação personalizada, você pode carregar e exibir dados dinamicamente em seu aplicativo React Native. Isso permitirá o manuseio eficiente de grandes conjuntos de dados.