Zenn
🍣

react-native-storageでデータを保持する

2020/12/07に公開
JavaScript
React Native
TypeScript
storage
tech

はじめに

ReactNativeでアプリを作っていると、データの保存方法は限られてきます。
特に有名なライブラリがあり、比較的親和性の高いFirebase(のfirestore)やRealm等が挙げられるかと思います。

ただ、そんな大仰なDBを持つ必要もないんだよなぁ・・・というケースもあるかと思います。
そんな場合、自分はreact-native-storageを使っています。

インストール

下記コマンドでインストールします。

yarn add react-native-storage
yarn add @react-native-community/async-storage

使い方

基本的な操作(CRUD)について記載します。
**※CRUDとはCREATE,READ,UPDATE,DELETEの4機能のことです **

storageの作成

react-native-storageはreact-nativeのAsyncStorageというモジュール(インストール時にreact-native-storageと一緒に宣言した@react-native-community/async-storageです)をラップしています。
そのため作成時にはAsyncStorageも一緒に使用する必要があります。

import Storage from 'react-native-storage';
import AsyncStorage from '@react-native-community/async-storage';

//ストレージの作成
const storage: Storage = new Storage({
    // 最大容量
    size: 1000,
    // バックエンドにAsyncStorageを使う
    storageBackend: AsyncStorage,
    // キャッシュ期限(null=期限なし)
    defaultExpires: null,
    // メモリにキャッシュするかどうか
    enableCache: true,
})

保存・更新

保存と更新はstorage.save()で行います。
keyには一意となる文字列を、dataには任意のデータを渡します。
更新時はkeyをもとに対象データを上書きします。

// ストレージに保存
storage.save({
  key: 'ZENN',
  data: {
    col1: 'hoge',
    col2: 100
  },
});

参照

参照はstorage.load()で行います。
保存時に指定したkeyを渡します。
こちらは非同期処理になります。

storage.load({
  key : 'ZENN'
}).then(data : { col1: string, col2: number } => {
  // 読み込み成功時処理
  console.log(data); // --> { col1: 'hoge', col2: 100 }
}).catch(err => {
  // 読み込み失敗時処理
  console.log('load failed.');
});

削除

削除はstorage.remove()で行います。
参照と同様にkeyを指定します。

storage.remove({
  key : 'ZENN'
});

注意点

上記の例のように、比較的簡単に様々なデータを端末内に保持することができます。
しかしreact-native-storageではデータの保存処理をJSON形式で行っているため、任意のObjectやDate型のようにプロパティとして持っている関数は 保存時に消滅 してしまう点に注意です。
例えば、保存しておいたDate型のデータを取得してすぐにgetDate()やtoString()などを実行しようとしてもエラーになります。
これを回避するためには、いったん取得したデータを元に新しいインスタンスを作る必要があります。

// 'DATE'をキーにして現在時刻を保存
storage.save({
  key: 'DATE',
  data: new Date(),
})

// Date型インスタンスを作成
let date : Date = new Date();

// 'DATE'をキーにstorageから読み出し
storage.load({
  key: 'DATE'
}).then((data: Date) => {
  // 読み出したdataをdateに入れる  
  date = data;
  // Date型のメソッドを使用
  //date.getTime();  // --> date.getTime is not a function...
  
  // Dateコンストラクタにdataを渡して新しいDateインスタンスを作成
  date = new Date(data);
  
  date.getTime(); // --> こうすることで正常に動作する
}).catch((error) => {
  
});

まとめ

今回はreact-native-storageのインストールと使い方について紹介しました。
どちらかといえば個人開発の小さなアプリの方が使う機会が多いライブラリだと思います。
軽量で簡単に組み込める反面、注意点の項目でも述べたように考慮する事項もいくつかありますが、総じて使い勝手がいいライブラリといえるでしょう。

Discussion