- เหตุใดการคงอยู่ (Persistence) ของข้อมูลจึงมีความสำคัญ
- การใช้ความคงอยู่ (Persistence) ของข้อมูลใน React Native
- การใช้ขอบเขต (Realm) สำหรับการจัดเก็บข้อมูลที่ซับซ้อน
- ใช้ประโยชน์จาก Redux-Persist เพื่อ State Persistence
การทำแอพ React Native และทำแอพมือถือโดยใช้ React Native เป็นการเดินทางที่น่าทึ่งที่รวบรวมความสวยงามของการเขียนเพียงครั้งเดียวและทำงานได้ทุกที่ โดยพื้นฐานแล้วเป็นการทำแอพ React Native และทำแอพมือถือข้ามแพลตฟอร์มอย่างแท้จริง React Native เชื่อมช่องว่างระหว่างแพลตฟอร์มต่างๆ (iOS และ Android) โดยนำเสนอรูปลักษณ์และความรู้สึกที่เหมือนกันในทุกอุปกรณ์ อย่างไรก็ตาม การสร้างอินเทอร์เฟซผู้ใช้และการผสานรวม API เป็นเพียงส่วนหนึ่งของปริศนาที่ใหญ่กว่าเท่านั้น หนึ่งในแง่มุมที่สำคัญกว่าและมักจะด้อยค่าของการทำแอพ React Native และทำแอพมือถือคือความคงอยู่ (persistence) ของข้อมูล
การคงอยู่ (persistence) ของข้อมูลเป็นสิ่งสำคัญในการสร้างประสบการณ์ผู้ใช้ที่ราบรื่น โดยข้อมูลแอปพลิเคชันจะยังคงอยู่ (persistence) ตลอดเซสชัน โดยไม่คำนึงว่าแอปจะปิดหรือรีสตาร์ทอุปกรณ์ บทความนี้จะแนะนำคุณเกี่ยวกับความซับซ้อนของการจัดเก็บและจัดการข้อมูลอย่างต่อเนื่องในแอปพลิเคชัน React Native
1. เหตุใดการคงอยู่ (Persistence) ของข้อมูลจึงมีความสำคัญ
ลองนึกภาพการใช้แอพมือถือที่ลืมความคืบหน้าของคุณทุกครั้งที่คุณปิดหรือขาดการเชื่อมต่ออินเทอร์เน็ต น่าผิดหวังใช่มั้ย? นั่นคือปัญหาที่การคงอยู่ (persistence) ของข้อมูลสามารถแก้ไขได้ ช่วยให้มั่นใจได้ว่าสถานะของแอปพลิเคชันและข้อมูลความคืบหน้าของผู้ใช้ยังคงสอดคล้องและถูกต้อง โดยไม่คำนึงถึงวงจรชีวิตของแอป
ความคงอยู่ (persistence) ของข้อมูลมีความสำคัญต่อฟีเจอร์ต่างๆ เช่น การยืนยันตัวตนผู้ใช้ ความพร้อมใช้งานของข้อมูลออฟไลน์ การบันทึกการตั้งค่าของผู้ใช้ และอื่นๆ อีกมากมาย ข้อมูลที่ต่อเนื่องช่วยปรับปรุงประสบการณ์ผู้ใช้อย่างมาก ทำให้แอปบนอุปกรณ์เคลื่อนที่ของคุณมีความน่าเชื่อถือและเป็นมิตรกับผู้ใช้มากขึ้น
2. การใช้ความคงอยู่ (Persistence) ของข้อมูลใน React Native
React Native มี API หลักAsyncStorageที่เรียกว่าสามารถใช้สำหรับการคงอยู่ (persistence) ของข้อมูลที่มีน้ำหนักเบา เป็นระบบจัดเก็บคีย์-ค่าแบบอะซิงโครนัส ไม่เข้ารหัส ถาวร ซึ่งเป็นส่วนกลางของแอป อย่างไรก็ตาม ใน React Native เวอร์ชัน 0.59 AsyncStorageได้ถูกแยกออกจากคอร์และตอนนี้ได้รับการดูแลโดยชุมชน
ต่อไปนี้คือตัวอย่างวิธีที่คุณสามารถใช้ AsyncStorage เพื่อจัดเก็บและดึงข้อมูล:
import AsyncStorage from '@react-native-async-storage/async-storage';
const storeData = async (key, value) => {
try {
await AsyncStorage.setItem(key, value)
} catch (e) {
// saving error
}
}
const getData = async (key) => {
try {
const value = await AsyncStorage.getItem(key)
if(value !== null) {
// value previously stored
}
} catch(e) {
// error reading value
}
}อย่างไรก็ตาม โปรดทราบว่าAsyncStorageไม่แนะนำสำหรับข้อมูลจำนวนมาก เหมาะสำหรับชุดข้อมูลขนาดเล็กหรือขนาดกลาง และไม่ได้สร้างมาเพื่อประสิทธิภาพสูง นอกจากนี้ ข้อมูลทั้งหมดจะถูกจัดเก็บเป็นสตริงซึ่งอาจต้องมีการซีเรียลไลเซชันและดีซีเรียลไลเซชัน
3. การใช้ขอบเขต (Realm) สำหรับการจัดเก็บข้อมูลที่ซับซ้อน
หากคุณต้องจัดการกับข้อมูลจำนวนมากหรือโครงสร้างข้อมูลที่ซับซ้อน Realm อาจเป็นตัวเลือกที่ดีกว่า Realm เป็นฐานข้อมูลอันทรงพลังที่ออกแบบมาโดยเฉพาะสำหรับแอปพลิเคชันมือถือ โดยมีคุณลักษณะขั้นสูง เช่น การสนับสนุนสำหรับความสัมพันธ์ การกรอง การเรียงลำดับ และอื่นๆ
หากต้องการเพิ่ม Realm ให้กับโปรเจ็กต์ React Native ของคุณ คุณสามารถใช้ npm หรือ Yarn:
npm install realm
# or
yarn add realmหลังจากติดตั้ง Realm แล้ว คุณสามารถกำหนดสคีมาข้อมูลของคุณและเริ่มใช้งานได้:
const Realm = require('realm');
const CarSchema = {
name: 'Car',
properties: {
make: 'string',
model: 'string',
miles: {type: 'int', default: 0},
}
};
Realm.open({schema: [CarSchema]})
.then(realm => {
// ...use the realm instance here
})
.catch(error => {
// Handle the error here if something went wrong
});4. ใช้ประโยชน์จาก Redux-Persist เพื่อ State Persistence
ในขณะที่ใช้ AsyncStorage และ Realm สำหรับการจัดเก็บข้อมูล Redux-Persist จะใช้สำหรับการคงอยู่ (persistence) ของสถานะ เมื่อทำแอพ React Native และทำแอพมือถือด้วย React Native การจัดการสถานะแอปของคุณอาจซับซ้อนขึ้นเมื่อแอปของคุณเติบโตขึ้น Redux เป็นไลบรารีการจัดการสถานะที่ให้วิธีจัดการและแยก “สถานะ” ในแอปพลิเคชันของคุณ ในทางกลับกัน Redux-Persist เป็นไลบรารีที่ช่วยให้สถานะของร้านค้า Redux ยังคงอยู่ (persistence) ตลอดการรีสตาร์ทแอป
หากต้องการเพิ่ม redux-persist ในโครงการของคุณ คุณจะต้องติดตั้ง:
npm install redux-persist
# or
yarn add redux-persistจากนั้นคุณจะต้องกำหนดค่าร้านค้าของคุณ:
import { createStore } from 'redux'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'
const persistConfig = {
key: 'root',
storage,
}
const persistedReducer = persistReducer(persistConfig, rootReducer)
export default () => {
let store = createStore(persistedReducer)
let persistor = persistStore(store)
return { store, persistor }
}เมื่อกำหนดค่าแล้ว สถานะของร้าน Redux ของคุณจะถูกบันทึกและโหลดโดยอัตโนมัติโดย Redux-Persist
ในโลกที่ผู้ใช้ต้องการความเร็ว ความสะดวก และความสม่ำเสมอ การคงอยู่ (persistence) ของข้อมูลได้กลายเป็นส่วนสำคัญของการทำแอพ React Native และทำแอพมือถือ ไม่ว่าคุณจะจัดเก็บข้อมูลส่วนเล็กๆ เช่น การตั้งค่าของผู้ใช้ หรือชุดข้อมูลที่ใหญ่กว่าและซับซ้อนกว่า React Native มีเครื่องมือที่คุณต้องการเพื่อตอบสนองความต้องการเหล่านี้ เพื่อให้แน่ใจว่าคุณสามารถมุ่งเน้นไปที่การทำแอพ React Native และทำแอพมือถือข้ามแพลตฟอร์มที่น่าทึ่งด้วย React Native .
ไลบรารีคงอยู่ (persistence) ของข้อมูล เช่น AsyncStorage, Realm และ Redux-Persist ไม่ได้เป็นเพียงเครื่องมือ แต่เป็นส่วนสำคัญของสถาปัตยกรรมของแอปพลิเคชันใดๆ การทำความเข้าใจวิธีใช้ประโยชน์จากเครื่องมือเหล่านี้สามารถเพิ่มประสบการณ์ผู้ใช้โดยรวมของแอปพลิเคชันของคุณได้อย่างมาก
ในขณะที่ AsyncStorage เป็นตัวเลือกที่ยอดเยี่ยมสำหรับงานที่เรียบง่าย แต่พลังของ Realm มาพร้อมกับชุดข้อมูลที่ใหญ่ขึ้นและซับซ้อนมากขึ้น Redux-Persist ช่วยเติมเต็ม Redux ได้อย่างสมบูรณ์แบบ ทำให้การคงอยู่ (persistence) ของสถานะเป็นเรื่องง่าย
ด้วยการรวมวิธีการคงอยู่ (persistence) ของข้อมูลเหล่านี้ไว้ในแอป React Native ของคุณ คุณเข้าใกล้การทำแอพ React Native และทำแอพมือถือที่มีผู้ใช้เป็นศูนย์กลางที่ทำงานได้อย่างสมบูรณ์ ซึ่งไม่เพียงมีประสิทธิภาพและเชื่อถือได้เท่านั้น แต่ยังมอบประสบการณ์การใช้งานที่ราบรื่นอีกด้วย