Apa itu AsyncStorage di React Native dan Bagaimana Cara Menggunakannya?

AsyncStorage React Native memudahkan penyimpanan dan penyimpanan data di aplikasi React Native. Dengan API AsyncStorage, Anda dapat menangani kasus sederhana data kecil dalam aplikasi Anda tanpa memerlukan penyimpanan lokal perangkat atau sistem penyimpanan yang kompleks.

Apa itu AsyncStorage React Native?

AsyncStorage API adalah sistem penyimpanan nilai kunci yang persisten. API mendukung berbagai tipe data JavaScript, termasuk objek string, boolean, angka, dan JSON.

Data yang disimpan menggunakan AsyncStorage tetap ada dan akan tetap tersedia meskipun aplikasi ditutup atau perangkat dihidupkan ulang. Ini menjadikan AsyncStorage solusi penyimpanan yang ideal untuk menyimpan data dalam cache dan menyimpan status aplikasi dalam jumlah kecil.

Masalah Apa yang Diselesaikan AsyncStorage?

Sebelum munculnya AsyncStorage, caching data yang tepat adalah upaya yang tidak dapat diandalkan. Anda dapat menyimpan data di penyimpanan lokal, yang tidak dapat menyimpan data saat aplikasi ditutup, atau Anda dapat menyimpan data di Relational Database Management System (RDBMS). Tetapi mereka terlalu rumit untuk dioperasikan untuk kasus penggunaan ini.

AsyncStorage memecahkan masalah ini dengan menyediakan cara sederhana dan andal untuk menyimpan data kecil dan sementara di aplikasi React Native.

Untuk menyimpan data dengan AsyncStorage, data terlebih dahulu diserialkan menjadi string JSON. String JSON kemudian disimpan dalam sistem nilai kunci. Saat Anda mencoba mengambil data dari AsyncStorage, data tersebut di-deserialisasi dari JSON, lalu dikembalikan kepada Anda dalam format aslinya.

Ini adalah program asinkron yang berjalan tanpa memblokir utas JavaScript utama. Menjadikannya ideal untuk menyimpan data yang perlu sering diakses, seperti pengaturan pengguna dan status aplikasi.

Metode AsyncStorage

Untuk menginstal react-native-async-storage paket, jalankan perintah berikut di dalam terminal proyek Anda:

npm instal @react-native-async-storage/async-storage

Karena AsyncStorage bersifat asinkron, metodenya tidak akan langsung memberikan hasil. Sebagai gantinya, mereka mengembalikan janji yang diselesaikan saat operasi selesai.

Anda harus menggunakan asinkron/menunggu sintaks atau teknik serupa saat memanggil metode AsyncStorage.

Tulis Data Menggunakan Metode setItem() dan multiSet()

Itu setItem() Dan multiSet() metode digunakan untuk mengatur nilai untuk kunci yang diberikan. Metode ini menerima kunci dan nilai sebagai parameter.

Metode ini akan mengembalikan janji yang diselesaikan dengan nilai boolean yang menunjukkan apakah operasi berhasil atau ditolak dengan kesalahan jika operasi gagal:

// Simpan nilai untuk kunci "pengguna"
menunggu AsyncStorage.setItem('pengguna', 'john');
// Simpan banyak nilai untuk kunci "pengguna"
menunggu AsyncStorage.multiSet(['pengguna', 'john', 'kelinci betina']);

Membaca Data Menggunakan Metode getItem() dan multiGet()

Dengan getItem() metode, Anda dapat menarik data yang disimpan dari penyimpanan menggunakan kunci untuk nilai yang ingin Anda dapatkan. Jika kunci yang diteruskan tidak ada, janji akan ditolak dengan kesalahan:

const nama = menunggu AsyncStorage.getItem('pengguna');

Nilai yang dikembalikan oleh getItem() adalah string. Jika Anda perlu menyimpan data dalam format lain, Anda dapat menggunakan JSON.stringifikasi() untuk mengonversi data menjadi string sebelum menyimpannya. Lalu gunakan JSON.mengurai() untuk mengonversi string kembali ke tipe data asli saat mengambilnya.

Misalnya:

// Simpan objek {nama: "John Doe", umur: 30} untuk kunci "pengguna"
menunggu AsyncStorage.setItem('pengguna', JSON.stringifikasi({nama: "John Doe", usia: 30}));
// Dapatkan objek untuk kunci "pengguna"
const pengguna = JSON.mengurai(menunggu AsyncStorage.getItem('pengguna'));

Anda juga dapat menggunakan multiGet() metode untuk menarik beberapa pasangan kunci-nilai. Metode ini akan mengambil larik kunci yang harus berupa string.

Menggabungkan Data Menggunakan Metode mergeItem() dan multiMerge()

Itu gabunganItem() Dan multiMerge() metode menggabungkan nilai yang diberikan dengan nilai yang ada untuk kunci yang diberikan. Nilai diteruskan ke gabunganItem() dapat berupa semua jenis data. Namun, penting untuk diperhatikan bahwa AsyncStorage tidak mengenkripsi data, jadi siapa pun yang memiliki akses ke perangkat dapat membaca datanya:

menunggu AsyncStorage.mergeItem('nama', 'Jane Doe');

gabunganItem() mengambil kunci untuk nilai yang ingin Anda gabungkan dan nilai baru yang ingin Anda gabungkan dengan nilai kunci yang ada. Menggunakan multiMerge() untuk menggabungkan lebih dari satu item ke nilai kunci.

Bersihkan Penyimpanan Menggunakan Metode clear()

Itu jernih() metode memungkinkan Anda untuk menghapus semua item yang disimpan di AsyncStorage. Ini dapat berguna dalam berbagai skenario, seperti saat Anda perlu menyetel ulang status aplikasi saat pengguna logout atau hapus data cache di ponsel Anda.

Misalnya:

const hapus Data = asinkron () => {
mencoba {
menunggu AsyncStorage.clear();

 } menangkap (e) {
menghibur.error (e);
 }
};

Kode di atas akan menghapus semua key-value pair yang disimpan di AsyncStorage.

Selain itu, Anda dapat menyediakan fungsi panggilan balik ke jernih(), yang akan dipanggil setelah operasi selesai:

AsyncStorage.clear()
 .Kemudian(() => {
// Hapus operasi selesai

 })
 .menangkap((kesalahan) => {
menghibur.error (kesalahan);
 });

Perhatikan bahwa jernih() metode akan secara permanen menghapus semua data yang disimpan di AsyncStorage.

Caching Data Dengan AsyncStorage

Caching data adalah praktik umum dalam pengembangan aplikasi seluler untuk meningkatkan kinerja dan mengurangi permintaan jaringan. Dengan AsyncStorage, Anda dapat dengan mudah melakukan cache data di aplikasi React Native.

Saat Anda mengakses sepotong data, data tersebut pertama kali diperiksa untuk melihat apakah sudah ada di cache. Jika ya, maka data dikembalikan dari cache. Jika tidak, maka program akan mengambil data dari lokasi penyimpanan yang lebih permanen dan menyimpannya di dalam cache. Lain kali Anda mengakses data, itu akan dikembalikan dari cache.

Asumsikan Anda memiliki aplikasi yang menampilkan daftar buku yang diambil dari API. Untuk meningkatkan kinerja, Anda dapat meng-cache data buku yang diambil menggunakan AsyncStorage.

Berikut ini contoh penerapannya:

const [buku, setBuku] = useState([]);
gunakanEfek(() => {
const ambilBuku = asinkron () => {
mencoba {
// Periksa apakah ada data yang di-cache
const cachedData = menunggu AsyncStorage.getItem('buku cache');
jika (Data cache !== batal) {
// Jika data yang di-cache ada, uraikan dan atur sebagai keadaan awal
 setBuku(JSON.parse (data cache));
 } kalau tidak {
// Jika data yang di-cache tidak ada, ambil data dari API
const tanggapan = menunggu mengambil(' https://api.example.com/books');
const data = menunggu respon.json();
// Cache data yang diambil
menunggu AsyncStorage.setItem('buku cache', JSON.stringifikasi (data));
// Tetapkan data yang diambil sebagai keadaan awal
 setBooks (data);
 }
 } menangkap (kesalahan) {
menghibur.error (kesalahan);
 }
 };
 ambilBuku();
 }, []);

Dalam contoh ini, Anda menggunakan useEffect hook untuk mengambil data buku. Dalam ambilBuku fungsi, periksa apakah data yang di-cache ada dengan menelepon AsyncStorage.getItem('cachedBooks'). Jika data yang di-cache ada, uraikan menggunakan JSON.mengurai dan atur sebagai keadaan awal menggunakan setBooks. Ini memungkinkan Anda untuk segera menampilkan data yang di-cache.

Jika data yang di-cache tidak ada, ambil data dari API menggunakan metode fetch(). Setelah data dikembalikan, cache dengan menelepon AsyncStorage.setItem(). Kemudian atur data yang diambil sebagai keadaan awal, pastikan bahwa render lebih lanjut akan menampilkan data yang diambil.

Anda sekarang dapat menampilkan buku-buku yang di-cache seperti ini:

impor Bereaksi, { useEffect, useState } dari'reaksi';
impor { Lihat, Teks, Daftar Datar } dari'bereaksi-asli';
impor AsyncStorage dari'@react-native-async-storage/async-storage';
const Aplikasi = () => {
kembali (

Daftar Buku</Text>
 data={buku}
 keyExtractor={(item) => item.id.toString()}
 renderItem={({ item }) => (

{item.judul}</Text>
{item.penulis}</Text>
 </View>
 )}
 />
 </View>
 );
};
eksporbawaan Aplikasi;

Peluncuran aplikasi lebih lanjut atau pemuatan ulang layar akan menampilkan data yang di-cache tanpa membuat permintaan API yang tidak perlu.

Menggunakan AsyncStorage untuk Pemuatan Data Dinamis

React Native AsyncStorage menawarkan solusi ampuh untuk menyimpan dan mengambil data. Memanfaatkan kemampuan caching, ini meningkatkan kinerja dan menyediakan akses lebih cepat ke data yang disimpan.

Saat Anda menggabungkan pengetahuan tentang AsyncStorage dengan teknik seperti paginasi khusus, Anda dapat memuat dan menampilkan data secara dinamis di aplikasi React Native Anda. Ini akan memungkinkan penanganan dataset besar yang efisien.