Quais são minhas opções para armazenar dados ao usar o React Native? (iOS e Android) [fechado]


230

Ainda sou novo no mundo React Native e, geralmente, também no mundo móvel / nativo, e estou achando a documentação um pouco ausente quando se trata de persistência de dados.

Quais são minhas opções para armazenar dados no React Native e as implicações de cada tipo? Por exemplo, vejo que há armazenamento local e armazenamento assíncrono, mas também vejo coisas como Realm, e estou confuso sobre como tudo isso funcionaria com um banco de dados externo.

Quero especificamente saber:

  • Quais são as diferentes opções para persistência de dados?
  • Para cada um, quais são os limites dessa persistência (ou seja, quando os dados não estão mais disponíveis)? Por exemplo: ao fechar o aplicativo, reiniciar o telefone etc.
  • Para cada um, existem diferenças (além da configuração geral) entre a implementação no iOS e no Android?
  • Como as opções se comparam para acessar dados offline? (ou como o acesso offline normalmente é tratado?)
  • Há outras considerações que devo ter em mente?

Obrigado pela ajuda!


se você deseja armazenar dados confidenciais, pode dar uma olhada no seguinte: stackoverflow.com/questions/45547657/…
Julien Kode

apenas uso Realm obviamente
Fattie

basta usar back4app se você quer uma solução simples (ou seja, parse.com)
Fattie

15
Como costuma acontecer no SO, perguntas que são úteis para um grande número de pessoas são encerradas por alguém ... talvez isso deva estar dizendo à comunidade do SO algo sobre 'as regras' e como elas são aplicadas? Tente olhar para as postagens mais usadas de todos os tempos e ver quantas seguem 'as regras'. Alguém está ouvindo?
user2330237

Respostas:


287

Aqui está o que aprendi ao determinar a melhor maneira de avançar com alguns dos meus projetos de aplicativos atuais.

Armazenamento assíncrono ("interno" para reagir ao nativo)

Eu uso o AsyncStorage para um aplicativo em produção. O armazenamento permanece local no dispositivo, não é criptografado (como mencionado em outra resposta), desaparece se você excluir o aplicativo, mas deve ser salvo como parte dos backups do dispositivo e persistir durante as atualizações (ambas as atualizações nativas, ala TestFlight e atualizações de código via CodePush )

Conclusão: armazenamento local; você fornece sua própria solução de sincronização / backup.

SQLite

Outros projetos em que trabalhei usaram o sqlite3 para armazenamento de aplicativos. Isso proporciona uma experiência semelhante ao SQL, com bancos de dados compactáveis ​​que também podem ser transmitidos de e para o dispositivo. Não tive experiência em sincronizá-los com um back-end, mas imagino que existem várias bibliotecas. Existem bibliotecas RN para conectar ao SQLite.

Os dados são armazenados no seu formato tradicional de banco de dados, com bancos de dados, tabelas, chaves, índices, etc. salvos no disco em formato binário. O acesso direto aos dados está disponível via linha de comando ou aplicativos que possuem drivers SQLite.

Conclusão: armazenamento local; você fornece a sincronização e o backup.

Firebase

O Firebase oferece, entre outras coisas, um banco de dados noSQL em tempo real, juntamente com um repositório de documentos JSON (como o MongoDB), destinado a manter de 1 a n número de clientes sincronizados. Os documentos falam sobre persistência offline, mas apenas para código nativo (Swift / Obj-C, Java). A opção JavaScript do Google ("Web"), usada pelo React Native, não fornece uma opção de armazenamento em cache (consulte a atualização 2/18 abaixo). A biblioteca é gravada com a suposição de que um navegador da Web se conectará e, portanto, haverá uma conexão semi-persistente. Provavelmente, você poderia escrever um mecanismo de cache local para complementar as chamadas de armazenamento do Firebase ou escrever uma ponte entre as bibliotecas nativas e o React Native.

Atualização 2/2018 Desde então, encontrei o React Native Firebase, que fornece uma interface JavaScript compatível para as bibliotecas iOS e Android nativas (fazendo o que o Google provavelmente poderia / deveria ter feito), oferecendo a você todos os benefícios das bibliotecas nativas com o bônus de React Suporte nativo. Com a introdução do Google de um repositório de documentos JSON ao lado do banco de dados em tempo real, estou dando ao Firebase uma boa segunda olhada em alguns aplicativos em tempo real que planejo criar.

O banco de dados em tempo real é armazenado como uma árvore semelhante a JSON que você pode editar no site e importar / exportar com bastante simplicidade.

Conclusão: Com o react-native-firebase, o RN obtém os mesmos benefícios que o Swift e o Java. [/ update] Escala bem para dispositivos conectados à rede. Baixo custo para baixa utilização. Combina bem com outras ofertas da nuvem do Google. Dados prontamente visíveis e editáveis ​​a partir de sua interface.

Reino

Atualização 4/2020 O MongoDB adquiriu o Realm e planeja combiná-lo com o MongoDB Stitch (discutido abaixo). Isso parece muito emocionante .


Também um armazenamento de objetos em tempo real com sincronização de rede automagica. Eles são considerados "dispositivos primeiro" e o vídeo de demonstração mostra como os dispositivos lidam com conectividade de rede esporádica ou com perdas.

Eles oferecem uma versão gratuita do armazenamento de objetos que você hospeda em seus próprios servidores ou em uma solução em nuvem como AWS ou Azure. Você também pode criar armazenamentos na memória que não persistem com o dispositivo, armazenamentos somente para dispositivos que não são sincronizados com o servidor, armazenamentos de servidores somente leitura e a opção de leitura e gravação completa para sincronização em um ou mais dispositivos. Eles têm opções profissionais e empresariais que custam mais adiantado por mês do que o Firebase.

Diferentemente do Firebase, todos os recursos do Realm são suportados no React Native e no Xamarin, assim como nos aplicativos Swift / ObjC / Java (nativo).

Seus dados estão vinculados a objetos no seu código. Por serem objetos definidos, você possui um esquema e o controle de versão é essencial para a integridade do código. O acesso direto está disponível através das ferramentas da GUI fornecidas pelo Realm. Os arquivos de dados no dispositivo são compatíveis com várias plataformas.

Conclusão: Primeiro dispositivo, sincronização opcional com planos gratuitos e pagos. Todos os recursos são suportados no React Native. Escala horizontal mais cara que o Firebase.

iCloud

Sinceramente, não brinquei muito com esse, mas vou fazê-lo em um futuro próximo.

Se você possui um aplicativo nativo que usa o CloudKit, pode usar o CloudKit JS para conectar-se aos contêineres do seu aplicativo a partir de um aplicativo Web (ou, no nosso caso, React Native). Nesse cenário, você provavelmente teria um aplicativo iOS nativo e um aplicativo React Native Android.

Como o Realm, ele armazena dados localmente e os sincroniza com o iCloud, quando possível. Existem lojas públicas para seu aplicativo e lojas particulares para cada cliente. Os clientes podem até optar por compartilhar algumas de suas lojas ou objetos com outros usuários.

Não sei como é fácil acessar os dados brutos; os esquemas podem ser configurados no site da Apple.

Conclusão: Ótimo para aplicativos direcionados à Apple.

Couchbase

Grande nome, muitas grandes empresas por trás disso. Há uma Community Edition e Enterprise Edition com os custos de suporte padrão.

Eles têm um tutorial em seu site para conectar coisas ao React Native. Também não gastei muito tempo com este, mas parece ser uma alternativa viável ao Reino em termos de funcionalidade. Não sei como é fácil acessar seus dados fora do seu aplicativo ou de qualquer API que você criar.

[Editar: Encontrou um link antigo que fala sobre o Couchbase e o CouchDB, e o CouchDB pode ser mais uma opção a considerar. Os dois são produtos historicamente relacionados, mas atualmente completamente diferentes. Veja esta comparação .]

Conclusão: Parece ter recursos semelhantes aos do Reino. Pode ser apenas para dispositivo ou sincronizado. Eu preciso experimentar.

MongoDB

Atualização 4/2020

A Mongo adquiriu a Realm e planeja combinar o MongoDB Stitch (discutido abaixo) com o Realm (discutido acima).


Estou usando esse servidor para um pedaço do aplicativo que usa o AsyncStorage localmente. Gosto que tudo seja armazenado como objetos JSON, tornando a transmissão para os dispositivos clientes muito simples. No meu caso de uso, ele é usado como um cache entre um provedor upstream de dados do guia de TV e os dispositivos do meu cliente.

Como não há estrutura rígida para os dados, como um esquema, todos os objetos são armazenados como um "documento" facilmente pesquisável, filtrável, etc. Objetos JSON semelhantes podem ter atributos adicionais (mas diferentes) ou objetos filhos, permitindo um muita flexibilidade na forma como você estrutura seus objetos / dados.

Não tentei nenhum cliente para sincronizar recursos de servidor nem o usei incorporado. Reagir O código nativo do MongoDB existe.

Conclusão: Solução NoSQL apenas local, nenhuma opção óbvia de sincronização como Realm ou Firebase.

Atualização 2/2019

O MongoDB possui um "produto" (ou serviço) chamado Stitch. Como os clientes (no sentido de navegadores da web e telefones) não devem conversar diretamente com o MongoDB (isso é feito por código no servidor), eles criaram um front-end sem servidor com o qual seus aplicativos podem interagir, caso você opte por usar os solução hospedada (Atlas). Sua documentação faz parecer que existe uma opção de sincronização possível.

Este artigo de dezembro de 2018 discute o uso do React Native, Stitch e MongoDB em um aplicativo de exemplo, com outros exemplos vinculados no documento ( https://www.mongodb.com/blog/post/building-ios-and-android-apps -com-o-mongodb-stitch-react-native-sdk ).

Twilio Sync

Outra opção NoSQL para sincronização é a sincronização do Twilio. No site: "A sincronização permite gerenciar o estado de qualquer número de dispositivos em tempo real em escala sem precisar lidar com nenhuma infraestrutura de back-end".

Eu vi isso como uma alternativa ao Firebase para um dos projetos acima mencionados, especialmente depois de conversar com as duas equipes. Também gosto das outras ferramentas de comunicação e as usei para enviar mensagens de texto a partir de um aplicativo da web simples.


[Editar] Passei algum tempo com o Reino desde que escrevi isso originalmente. Gosto de não precisar escrever uma API para sincronizar os dados entre o aplicativo e o servidor, semelhante ao Firebase. As funções sem servidor também parecem ser realmente úteis com essas duas, limitando a quantidade de código de back-end que tenho que escrever.

Adoro a flexibilidade do armazenamento de dados do MongoDB, que está se tornando minha escolha para o lado do servidor de aplicativos baseados na Web e outros necessários para conexão.

Encontrei o RESTHeart , que cria uma API RESTful muito simples e escalável para o MongoDB. Não deve ser muito difícil criar um componente React (Native) que leia e grave objetos JSON no RESTHeart, que por sua vez os transmite para / do MongoDB.


[Editar] Adicionei informações sobre como os dados são armazenados. Às vezes, é importante saber quanto trabalho você pode ter durante o desenvolvimento e o teste, se precisar ajustar e testar os dados.


Edições 2/2019 Eu experimentei várias dessas opções ao criar um projeto de alta simultaneidade no ano passado (2018). Alguns deles mencionam limites de concorrência rígidos e flexíveis em sua documentação (o Firebase teve um difícil em 10.000 conexões, acredito, enquanto o Twilio era um limite flexível que poderia ser ultrapassado, de acordo com discussões com as duas equipes da AltConf).

Se você estiver projetando um aplicativo para dezenas a centenas de milhares de usuários, esteja preparado para dimensionar o back-end de dados de acordo.


1
bem, e o Redux?
HIRA THAKUR 31/01

4
O @LeonardoDaCodinchi Redux seria útil para o gerenciamento de estado, mas não fornece funcionalidade de armazenamento persistente.
walshie4

1
por que não redux-persistente em sua lista? você poderia adicionar algo sobre isso? se é tão ruim assim.
Shahzad Mirza

Quando escrevi isso, não havia passado tempo olhando nada relacionado ao Redux. Meus aplicativos React e React-Native existentes (que já têm quase dois anos e estão apenas no modo de manutenção) não o usam. Talvez em um projeto futuro seja apresentado, nesse momento eu posso oferecer alguns comentários justos.
23918 Bryan Scott

1
Eu amei o jeito que você colocou tudo. Seria melhor se você adicionar prós e contras para cada um deles (também link dos seus documentos). Como eu descobri, um deles AsyncStoragesuporta apenas 6 MB no Android, enquanto no iOS não existe essa limitação.
22618 Jim Jim Patel #

58

Rápido e sujo: basta usar Redux + reagem-redux + redux-persistem + AsyncStorage para reagir nativa.

Ele se encaixa quase perfeitamente no mundo nativo de reação e funciona como um encanto para o Android e o iOS. Além disso, há uma comunidade sólida ao redor e muitas informações.

Para um exemplo de trabalho, consulte o F8App do Facebook.

Quais são as diferentes opções para persistência de dados?

Com react native, você provavelmente deseja usar redux e redux-persist. Ele pode usar vários mecanismos de armazenamento. AsyncStorage e redux-persist-filesystem-storage são as opções para o RN.

Existem outras opções, como Firebase ou Realm, mas nunca as usei em um projeto de RN.

Para cada um, quais são os limites dessa persistência (ou seja, quando os dados não estão mais disponíveis)? Por exemplo: ao fechar o aplicativo, reiniciar o telefone etc.

Usando redux + redux-persist, você pode definir o que é mantido e o que não é. Quando não persistente, existem dados enquanto o aplicativo está em execução. Quando persistidos, os dados persistem entre as execuções de aplicativos (feche, abra, reinicie o telefone etc.).

O AsyncStorage tem um limite padrão de 6 MB no Android. É possível configurar um limite maior (no código Java) ou usar o redux-persist-filesystem-storage como mecanismo de armazenamento para Android.

Para cada um, existem diferenças (além da configuração geral) entre a implementação no iOS e no Android?

Usando redux + redux-persist + AsyncStorage, a configuração é exatamente a mesma no Android e iOS.

Como as opções se comparam para acessar dados offline? (ou como o acesso offline normalmente é tratado?)

Usando o redux, o acesso offiline é quase automático, graças às suas partes de design (criadores de ação e redutores).

Todos os dados que você buscou e armazenou estão disponíveis, é possível armazenar facilmente dados extras para indicar o estado (busca, sucesso, erro) e a hora em que foram buscados. Normalmente, solicitar uma busca não invalida dados mais antigos e seus componentes apenas atualizam quando novos dados são recebidos.

O mesmo se aplica na outra direção. Você pode armazenar dados que está enviando para o servidor e que ainda estão pendentes e manipulá-los de acordo.

Há outras considerações que devo ter em mente?

O React promove uma maneira reativa de criar aplicativos e o Redux se encaixa muito bem nele. Você deve experimentá-lo antes de usar uma opção que usaria em seu aplicativo normal para Android ou iOS. Além disso, você encontrará muito mais documentos e ajuda para eles.


3
Obrigado pelo mergulho profundo no AsyncStorage / Redux Persist. Eu estava procurando mais uma visão geral de todas as opções, então essa é a única razão pela qual não escolhi essa como resposta oficial.
Sia

9

As pessoas acima atingem as notas corretas para armazenamento, mas se você também precisar considerar quaisquer dados de PII que precisem ser armazenados, também poderá ocultar o chaveiro usando algo como https://github.com/oblador/react-native-keychain já que o ASyncStorage não é criptografado. Pode ser aplicado como parte da configuração persistente em algo como redux-persist.


1

você pode usar o armazenamento de sincronização mais fácil de usar do que o armazenamento assíncrono. essa biblioteca é ótima, que usa armazenamento assíncrono para salvar dados de forma assíncrona e usa memória para carregar e salvar dados instantaneamente de forma síncrona; portanto, salvamos os dados assíncronos na memória e os usamos na sincronização de aplicativos, o que é ótimo.

import SyncStorage from 'sync-storage';

SyncStorage.set('foo', 'bar');
const result = SyncStorage.get('foo');
console.log(result); // 'bar'

1

você pode usar o Realm ou o Sqlite se desejar gerenciar tipos de dados complexos.

Caso contrário, vá com a recuperação nativa integrada integrada


0

Não precisamos redux-persistir, podemos simplesmente usar redux para persistência.

react-redux + AsyncStorage = redux-persist

então dentro do arquivo createotre basta adicionar essas linhas

store.subscribe(async()=> await AsyncStorage.setItem("store", JSON.stringify(store.getState())))

isso atualizará o AsyncStorage sempre que houver algumas alterações no repositório redux.

Em seguida, carregue a loja convertida json. sempre que o aplicativo carregar. e arrume a loja novamente.

Porque o redux-persist cria problemas ao usar o wix react-native-navigation. Se for esse o caso, prefiro usar o redux simples com a função de assinante acima

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.