一分鐘實現，一個RN持久數據管理器

在React Native開發過程中，總避免不了需要存儲一些數據在本地。對於大多數應用只需要存儲一些結構簡單的數據，如標記位，用戶信息等。這時候我們首選擇的存儲方式就是AsyncStorage，那我們先來看下AsyncStorage給我提供了哪些基本方法：

可以看出AsyncStorage已經包含set、get、remove、clear等一系列靜態方法，基本上已經滿足了我們對數據增、刪、改、查（CURD 下文中我都統一使用簡稱）的需求。對於AsyncStorage的使用，官網建議我們再封裝一層，而不是直接使用AsyncStorage。

那我們先在網上搜索一下看看大家是怎麼封裝AsyncStorage的。通過在網上大量的搜索與對比，我把大家的封裝方式分為三類：

重複造輪式
這種封裝方式，基本上是新建一個可導出的類，加入幾個靜態的CURD方法，然後在相應的靜態方法裡面直接調用AsyncStorage的CURD方法，其它的不做任何處理。【這種‘‘簡陋’’的封裝，還不如不封裝】
類型轉換式
這種封裝方式，相較於重複造輪式，增加了類型轉換和異常捕獲，使得

AsyncStorage的數據存的類型不再侷限於string，可以保存對象、數組等結構數據類型，對於取數據的時候也做相應的轉換【基本滿足開發需求，但使用不夠簡單】

過度封裝式
這種封裝方式，給AsyncStorage的操作增加了很多附加的存、取可選項，比如增加Where條件查詢，保存，這種表面上看著封裝之後對AsyncStorage的操作變得更“靈活”，功能“更強大”，實則很雞肋。【多此一舉，為何不選擇 sqlite 庫】

  雖然AsyncStorage的底層是sqlite db實現的，並不是表示我們就得讓AsyncStorage支持sqlite的各種標準的數據庫操作，AsyncStorage被設計出來的初衷就是用於存取一些結構相對簡單的數據，如果真要操作大量、複雜的數據那就應該選擇RN的 sqlite庫去實現。

通過以上這幾類方式的對比，發現第二種AsyncStorage封裝方式的是比較合適的。在使用過程中基本也是以Key-Value的形式是存、取數據。但是如果項目中有大量的數據存、取操作時。這個Keys的維護是一個難題：

在訪問AsyncStorage的地方，手動寫key，如：XXX.get('userId')，這種方式缺點也很明顯，如果有大量地同一屬性的操作，得寫很多遍，因此也增加了寫錯的可能性，Coding體驗非常不好。
定義屬性常量Key，通過常量Key去訪問屬性，如：XXX.get(Const.User_Id)，在屬性訪問比較頻繁的時候，可能這種方式比較合適。但這樣又“額外”的引入了常量集合資源，增加了項目的複雜度。

沒有更好的方式去訪問AsyncStorage呢？當然有，這裡就要進入我們今天的主題了，【怎樣一分鐘實現一個AsyncStorage 訪問器】，且在使用的時候也能方便，快捷的訪問AsyncStorage數據。

第一步：
花 10 秒鐘定義一個全局可導出的數據管理對象及需要存儲的相應屬性，如：

export const RNStorage = {// RNStorage 自定義數據存儲對象
       token: undefined, //  字符串類型
       isShow: undefined, // 布爾類型
       userInfo: undefined, // 對象類型
   };

第二步：
再花 20 秒的時間，在程序初始化的地方引入XStorage，並調用初始化綁定RNStroage與AsyncStorage，然後你就可以在任何地方對RNStorage中字義的變量進行【取值】、【賦值】操作了，相應的屬性值，會被自動同步持久化到AsyncStorage中。

import { XStorage } from 'react-native-easy-app';
import { AsyncStorage } from 'react-native';

  XStorage.initStorage(RNStorage, AsyncStorage, () => {
  // 當自定義對象 RNStorage 被初始化完成之後，就可以對其任何屬性進行取值、賦值操作；
  // 對RNStorage 屬性的取、賦值操作會被自動映射成 AsyncStorage 的getItem與setItem方法；
             
 console.log(RNStorage.isShow);
 // 相當於 [ console.log(await AsyncStorage.getItem('isShow')) ] 
 
 RNStorage.token = 'TOKEN1343DN23IDD3PJ2DBF3==';
 // 相當於 [ await AsyncStorage.setItem('token',TOKEN1343DN23IDD3PJ2DBF3==') ] 
 
 RNStorage.userInfo = {name: 'rufeng', age: 30};
 // 相當於 [ await AsyncStorage.setItem('userInfo',JSON.stringify({ name:'rufeng', age:30})) ] 
  });

第三步：

再花10秒的時間輸入npm庫安裝命令( js庫大小不到60k )
安裝方式（2選1）：

yarn add react-native-easy-app
npm install react-native-easy-app --save

剩下20秒的時間，您只需要端起咖啡等待 react-native-easy-app 庫的安裝完成。

有沒有很簡單，花了1分鐘不到的時間就構建了一個RN的AsyncStorage數據訪問管理器，從此以後，如果有任何新的數據需要保存到AsyncStorage中，只需要在RNStorage對象中定義相應的屬性字段即可。RNStorage的屬性字段對數據的類型有 string，bool，object 等各種類型的支持。總之一句話：您可以像訪問內存對象一樣同步訪問RNStorage裡面定義的任何屬性，這些屬性會被自動同步到AsyncStorage中。

示例項目：react-native-easy-app-sample 中的 StorageController 頁面包含RNStorage的數據存、取的應用實現，大家可以參考。

這樣文章開頭AsyncStorage的第二種封裝方式的訪問問題就迎刃而解了，或許你還不放心，也不懂RNStorage的實現原理，那你可以看看這篇文章：

react-native-easy-app 詳解與使用之（一） AsyncStorage

Leave a Reply Cancel reply