web-dev-qa-db-ja.com

React Nativeを使用するときにデータを保存するための私のオプションは何ですか? (iOSとAndroid)

私はReact Nativeの世界、そして一般的にはモバイル/ネイティブの世界でもまだ新しい経験があり、データの永続化に関してはドキュメントがやや不足していると感じています。

React Nativeにデータを保存するための私のオプションは何ですか?また各タイプの意味は?たとえば、ローカルストレージと非同期ストレージがあることはわかりますが、その場合はRealmのようなものもあり、これらすべてが外部データベースでどのように機能するのか混乱しています。

特に知りたいのですが。

  • データの永続化にはどのような選択肢がありますか?
  • それぞれについて、その持続性の限界は何ですか(すなわち、データが利用できなくなったとき)。たとえば、アプリケーションを閉じるとき、電話を再起動するときなどです。
  • それぞれについて、iOSとAndroidでの実装に違いはありますか(一般的な設定以外)?
  • オフラインでデータにアクセスする場合のオプションの違いは何ですか? (またはオフラインアクセスは通常どのように処理されますか?)
  • 私が留意する必要がある他の考慮事項はありますか?

ご協力いただきありがとうございます!

149
Sia

これが、私が現在行っているいくつかのアプリプロジェクトを進めるための最善の方法を決定するときに学んだことです。

非同期ストレージ (Reactネイティブには "組み込み")

私は本番アプリケーションにAsyncStorageを使用します。ストレージはデバイスにローカルであり、暗号化されていないため(別の回答で説明したように)、アプリを削除すると消えますが、デバイスのバックアップの一部として保存されます。 ).

結論:ローカルストレージ。あなたはあなた自身の同期/バックアップソリューションを提供します。

SQLite

私が取り組んでいる他のプロジェクトは、アプリの保存にsqlite3を使っています。これにより、デバイスとの間でやり取りできる圧縮可能なデータベースを使用して、SQLに似たエクスペリエンスを実現できます。それらをバックエンドに同期させる経験はありませんが、さまざまなライブラリが存在すると思います。 SQLiteに接続するためのRNライブラリがあります。

データは、データベース、テーブル、キー、インデックスなど、すべてバイナリ形式でディスクに保存された従来のデータベース形式で保存されます。データへの直接アクセスは、SQLiteドライバを持っているコマンドラインまたはアプリを通して利用可能です。

結論:ローカルストレージ。同期とバックアップを提供します。

Firebase

Firebaseは、とりわけ、1からnまでのクライアントの同期を維持するためのJSONドキュメントストア(MongoDBなど)と共にリアルタイムのnoSQLデータベースを提供します。ドキュメントはオフライン永続化について話していますが、ネイティブコード(Swift/Obj-C、Java)についてのみです。 React Nativeで使用されているGoogle独自のJavaScriptオプション( "Web")では、キャッシュストレージオプションは提供されていません(下記の2/18更新を参照)。このライブラリは、Webブラウザが接続しようとしているという前提で書かれているため、半永続的な接続が確立されます。 Firebaseのストレージ呼び出しを補うためにローカルのキャッシュメカニズムを作成することも、ネイティブライブラリとReact Nativeの間にブリッジを作成することもできます。

[Update 2/2018]私が見つけた React Native Firebase (ネイティブのiOSとAndroidのライブラリに互換性のあるJavaScriptインターフェースを提供する) React Nativeサポートのボーナスを持つライブラリ。リアルタイムデータベースの横にグーグルがJSONドキュメントストアを導入したことで、私はFirebaseに、私が構築しようとしているいくつかのリアルタイムアプリケーションの見栄えを良くしました。

リアルタイムデータベースはJSONのようなツリーとして保存されているので、Webサイトで編集したり、インポート/エクスポートすることが非常に簡単にできます。

結論:react-native-firebaseにより、RNはSwiftやJavaと同じ利点を得ます。 [/ update]ネットワークに接続された機器に適しています。低利用のための低コスト他のGoogleクラウド製品とうまく組み合わせます。データはそれらのインターフェースから容易に表示および編集可能です。

レルム

オートマジックネットワーク同期によるリアルタイムオブジェクトストア。彼らは自分自身を「デバイス優先」と宣伝し、デモビデオはデバイスが散発的または損失の多いネットワーク接続をどのように処理するかを示しています。

彼らはあなたがあなた自身のサーバ上で、あるいはAWSやAzureのようなクラウドソリューションでホストするオブジェクトストアの無料版を提供します。デバイスと永続化しないメモリ内ストア、サーバーと同期しないデバイス専用ストア、読み取り専用サーバーストア、および1つ以上のデバイス間で同期するための完全な読み書きオプションを作成することもできます。彼らには、Firebaseよりも月額前払いでプロフェッショナルとエンタープライズのオプションがあります。

Firebaseとは異なり、すべてのRealm機能は、Swift/ObjC/Java(ネイティブ)アプリの場合と同様に、React NativeおよびXamarinでサポートされています。

データはコード内のオブジェクトに関連付けられています。それらは定義されたオブジェクトなので、スキーマを持っています、そしてバージョン管理はコードの健全性にとって必須です。 Realmが提供するGUIツールを介して直接アクセスできます。デバイス上のデータファイルはクロスプラットフォーム互換です。

結論:最初にデバイス、無料および有料のプランとのオプションの同期。 React Nativeでサポートされているすべての機能。水平スケーリングはFirebaseよりも高価です。

iCloud

私は正直なところこれで遊ぶことはあまりしませんでしたが、近いうちにそうするでしょう。

CloudKitを使用するネイティブアプリがある場合は、CloudKit JSを使用してWebアプリからアプリのコンテナーに接続できます(または、この場合はReact Native)。このシナリオでは、おそらくネイティブiOSアプリとReactネイティブAndroidアプリがあります。

Realmと同様に、これはデータをローカルに保存し、可能な場合はiCloudに同期します。アプリ用のパブリックストアと各顧客用のプライベートストアがあります。顧客は自分の店や物の一部を他のユーザーと共有することを選択することさえできます。

生データにアクセスするのがどれほど簡単かわからない。スキーマはAppleのサイトで設定できます。

結論:Appleをターゲットとしたアプリに最適です。

Couchbase

ビッグネーム、その背後にある多くの大企業。標準サポート費用を含むCommunity EditionとEnterprise Editionがあります。

彼らは自分たちのサイト上でReact Nativeに物事をフックするためのチュートリアルを持っています。私もこれにはあまり時間をかけていませんが、機能的にはRealmに代わる実行可能な方法のようです。私は、あなたのデータをあなたのアプリやあなたが構築したどんなAPIの外側にも届くことがどれほど簡単であるかわかりません。

[編集:CouchbaseとCouchDBについて話している古いリンクを見つけました、そしてCouchDBはまだ考慮すべきもう一つの選択肢かもしれません。この2つは歴史的に関連していますが、現在は完全に異なる製品です。 この比較 を参照してください。

結論:Realmと同様の機能があるようです。デバイスのみまたは同期することができます。試してみる必要があります。

MongoDB

このサーバーサイドをAsyncStorageをローカルで使用するアプリの一部として使用しています。すべてがJSONオブジェクトとして格納されているので、クライアントデバイスへの送信が非常に簡単になります。私のユースケースでは、それはTVガイドデータの上流のプロバイダーと私のクライアントデバイスの間のキャッシュとして使われています。

スキーマのようにデータにハードな構造はないので、すべてのオブジェクトは簡単に検索、フィルタリングなどが可能な「ドキュメント」として格納されます。同様のJSONオブジェクトには追加の(ただし異なる)属性または子オブジェクトがあります。オブジェクトやデータをどのように構成するかについては、多くの柔軟性があります。

私はクライアントからサーバへの同期機能を試したことがなく、またそれを埋め込みで使ったこともありません。 MongoDBのReactネイティブコードは存在します。

結論:ローカルのみのNoSQLソリューション、RealmやFirebaseのような明らかな同期オプションはありません。

[更新2/2019]

MongoDBにはStitchという「製品」(またはサービス)があります。クライアント(Webブラウザや電話の意味で)はMongoDBと直接通信するべきではないので(サーバー上のコードによって行われます)、アプリケーションを使用できるサーバーレスのフロントエンドを作成しました。ホストソリューション(アトラス)。彼らのドキュメンテーションはそれが可能な同期オプションがあるように思わせます。

2018年12月からのこの記事では、サンプルアプリでReact Native、Stitch、およびMongoDBを使用することについて説明します。他のサンプルはドキュメントにリンクされています( https://www.mongodb.com/blog/post/building-ios-and-Android -apps-with-the-mongodb-stitch-react-native-sdk )。

Twilio同期

同期のためのもう1つのNoSQLオプションはTwilioの同期です。彼らのサイトから:「同期はバックエンドインフラストラクチャを処理する必要なしにリアルタイムでスケールで任意の数のデバイスにわたる状態を管理することを可能にします。」

私はこれをFirebaseに代わるものとして、特に両方のチームと話をした後で、前述のプロジェクトの1つとして検討しました。私は他のコミュニケーションツールも気に入っていて、簡単なウェブアプリからのテキストの更新にそれらを使っています。

[/更新]


[編集]私が最初にこれを書いて以来、私はレルムといくらかの時間を費やしました。 Firebaseと同様に、アプリとサーバーの間でデータを同期するためのAPIを作成する必要がないのが好きです。サーバーレス関数も、これら2つにとって非常に役立つように思われるので、私が書かなければならないバックエンドコードの量を制限します。

私はMongoDBデータストアの柔軟性を気に入っているので、Webベースのアプリケーションやその他の接続が必要なアプリケーションのサーバー側には、それが私の選択となりつつあります。

RESTHeart が見つかりました。これは、MongoDBに対する非常に単純でスケーラブルなRESTful APIを作成します。 JSONオブジェクトをRESTHeartに読み書きするReact(Native)コンポーネントを構築するのはそれほど難しくないはずです。


[編集]データの保存方法に関する情報を追加しました。データを微調整してテストする必要がある場合は、開発およびテストの間にどれだけの作業が必要になるかを知ることが重要な場合があります。


[Update 2/2019]昨年(2018年)、同時実行性の高いプロジェクトを設計する際に、これらのオプションのいくつかを試しました。 AltConfの両チームとの協議によると、彼らの中には文書の中でハードとソフトの同時実行性の限界に言及している(Firebaseは10,000接続でハードな限界を持っていました。

数万から数十万のユーザー向けにアプリを設計している場合は、それに応じてデータバックエンドを拡張する準備をしてください。

198
Bryan Scott

早くて汚い:react-nativeには Redux + react-redux + redux-persist + AsyncStorage を使うだけです。

それはほとんど完全に反応するネイティブの世界にフィットし、AndroidとiOSの両方にとって魅力的なように機能します。また、その周りにはしっかりしたコミュニティがあり、たくさんの情報があります。

実用的な例については、Facebookの F8App を参照してください。

データの永続化にはどのような選択肢がありますか?

React nativeでは、おそらくreduxとredux-persistを使いたいでしょう。複数のストレージエンジンを使用できます。 AsyncStorageとredux-persist-filesystem-storageがRNのオプションです。

FirebaseやRealmのような他のオプションもありますが、私はRNプロジェクトでそれらを使ったことは一度もありません。

それぞれについて、その持続性の限界は何ですか(すなわち、データが利用できなくなったとき)。たとえば、アプリケーションを閉じるとき、電話を再起動するときなどです。

Redux + redux-persistを使用すると、永続化するものとしないものを定義できます。永続化されていない場合、データはアプリの実行中に存在します。永続化されていると、データはアプリの実行(閉じる、開く、電話を再起動するなど)の間も持続します。

AsyncStorageのデフォルトの制限はAndroidでは6MBです。より大きな制限を(Javaコードで)設定することも、Androidのストレージエンジンとしてredux-persist-filesystem-storageを使用することもできます。

それぞれについて、iOSとAndroidでの実装に違いはありますか(一般的な設定以外)?

Redux + redux-persist + AsyncStorageを使用すると、セットアップはAndroidでもiOSでもまったく同じです。

オフラインでデータにアクセスする場合のオプションの違いは何ですか? (またはオフラインアクセスは通常どのように処理されますか?)

レデックスを使用すると、そのデザインパーツ(アクションクリエーターとレデューサー)のおかげで、オフラインアクセスはほぼ自動的に行われます。

取得して保存したデータはすべて利用可能です。状態(取得中、成功、エラー)と取得時刻を示すために追加のデータを簡単に保存できます。通常、フェッチを要求しても古いデータが無効になることはなく、新しいデータを受信したときにコンポーネントが更新されるだけです。

他の方向についても同様です。あなたがサーバに送信しているデータを保存することができ、それはまだ保留中であり、それに応じてそれを処理します。

私が留意する必要がある他の考慮事項はありますか?

Reactはアプリケーションを作成するための反応的な方法を促進し、Reduxはそれに非常に適しています。通常のAndroidまたはiOSアプリで使用するオプションを使用する前に、試してみてください。また、あなたはもっと多くの文書を見つけてそれらのために手助けするでしょう。

45
Filipe Borges

上記の人々は保存のための正しいメモを打ちました、あなたが保存する必要があるどんなPIIデータも考慮する必要があるならばあなたはまた のような何かを使ってキーチェーンに隠れることができます-keychain ASyncStorageは暗号化されていないので。それはredux-persistのようなもので永続化設定の一部として適用することができます。

8
Jeff Chew

複雑なデータ型を管理する場合は、RealmまたはSqliteを使用できます。

それ以外の場合は、組み込みの反応ネイティブasynstorageを使用します

1
sreerag

sync storage を使うことができます//async storageよりも使いやすいです。このライブラリは非同期ストレージを使用してデータを非同期に保存し、メモリを使用してデータを同期して即座にロードおよび保存するので、非同期でデータをメモリに保存してアプリの同期に使用するので、これは素晴らしいことです。

import SyncStorage from 'sync-storage';

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

我々は単に固執のためにreduxを使うことができるredux-persistを必要としません。

react-redux + AsyncStorage = redux-persist

そのため、opensotreファイルの内部には、単に次の行を追加してください。

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

これは、reduxストアに何らかの変更があると必ずAsyncStorageを更新します。

その後、JSON変換ストアをロードします。いつでもアプリがロードされます。そして店をもう一度設定します。

Wix react-native-navigationを使用するとredux-persistが問題を引き起こすためです。それが事実であるならば、それから私は上記の加入者機能で単純な還元を使うのを好みます

0