During React Native development, it is inevitable to store some data locally. Most applications only need to store some simple structured data, such as tag bits, user information and so on. At this time, the first storage method we choose is AsyncStorage, so let’s take a look at the basic methods AsyncStorage provides to me:

AsyncStorage_methods.png

It can be seen that AsyncStorage already contains a series of static methods such as set, GET, remove and clear, which have basically met our requirements for adding, deleting, modifying and querying data (CURD is universally referred to as CURD below). For AsyncStorage, the official website suggests that we wrap another layer instead of using AsyncStorage directly.

So let’s do a web search to see how people encapsulate AsyncStorage. Through a lot of searching and comparing on the Internet, I have divided people’s encapsulation methods into three categories:

  1. This encapsulation method is basically to create a new exportable class, add several static CURD methods, and then directly call the AsyncStorage CURD methods in the corresponding static methods, and do nothing else. [This’ crude ‘package is better than no package]

  2. Type conversion type This way of packaging, compared with repeated wheel, increase the type conversion, and exception handling makes AsyncStorage the type of data storage is no longer limited to the string, can save the object data types, arrays, structures, etc, to take data also make a corresponding transformation [basic meet the development needs, but not easy to use 】

  3. Excessive encapsulation adds many additional storage and retrieval options to the operation of AsyncStorage. For example, by adding Where condition query and save, the operation of AsyncStorage becomes more “flexible” and “more powerful” after encapsulation, but in fact, it is very weak. Why not choose sqLite library?

    Although the bottom layer of AsyncStorage is implemented by SQLite DB, it does not mean that we should make AsyncStorage support various standard DATABASE operations of SQLite. The original intention of AsyncStorage is to access some data with relatively simple structure. RN’s SQLite library is the best choice if you really want to manipulate large, complex data.

Through the comparison of the above types of methods, it is found that the second AsyncStorage encapsulation method is more appropriate. In the process of use, data is stored and retrieved in the form of key-value. However, if the project has a large number of data storage and fetch operations. Maintenance of this key is a challenge:

  1. When accessing AsyncStorage, write keys manually, such as xxx. get(‘userId’). This method also has obvious disadvantages. If there are a large number of operations on the same property, it has to write many times, so it also increases the possibility of writing errors.

  2. Get (conconst.User_Id). This method may be appropriate for frequent access to the property. But this “extra” introduces constant collection resources, increasing the complexity of the project.

Isn’t there a better way to access AsyncStorage? Of course, there is, here is going to enter our topic today, [how to implement an AsyncStorage accessor in one minute], and when using it can also be convenient, fast access to AsyncStorage data.

Step 1: Take 10 seconds to define a globally exportable data management object and the userId attribute that needs to be stored, such as:

export const RNStorage = {// Persist a list of data
    userId: undefined./ / user ID
};
Copy the code

Step 2: Take another 20 seconds, introduce XStorage in the program initialization place, and call the initialization binding RNStroage, then you can access the RNStorage properties at will.

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

XStorage.initStorage(RNStorage, AsyncStorage, () => {    // The binding is complete, and now you can access any data in RNStorage at will
    RNStorage.userId = '#@23DF424FGD234DKT45IU'; SetItem ('userId','# @23DF424fgd234dkt45IU ')
    console.log('userId=' + RNStorage.userId); // equivalent to console.log(await asyncstorage.getitem ('userId'))
});
Copy the code

Step 3:

  • After 10 seconds, type the NPM library installation command (the JS library size is less than 60K.) Install mode (choose 1 from 2) : YARN add react-native easy-app NPM install react-native Feasyst-app –save

For the remaining 20 seconds, just pick up your coffee and wait for the React-Native Easy-App library to be installed.

RN’s AsyncStorage data access manager was built in less than a minute. From then on, if there is any new data that needs to be saved to AsyncStorage, just define the corresponding property field in the RNStorage object. RNStorage property fields support various types of data, such as string, bool, object, etc. In short: you can synchronously access any properties defined in RNStorage as if they were memory objects, and these properties are automatically synchronized to AsyncStorage.

So the beginning of the article AsyncStorage second encapsulation access problem is solved, perhaps you still do not trust, also do not understand RNStorage implementation principle, then you can have a look at this article:

React-native Easy app AsyncStorage

If you have any questions, please scan code to join RN QQ communication group