當我們打造一個 Todo List App，希望是不管何時打開 App，我們之前所輸入的內容都會被保存下來，而不會因為重新開啟 App 而失去資料。

這篇文章將會示範如何永久儲存待辦事項的資料，這樣不管什麼時候打開 App，我們都能看到之前的紀錄。儲存資料的方法有很多，但 Expo 有提供 Expo SecureStore 這個模組，所以今天這篇文章將會示範如何使用 Expo SecureStore 來幫助達成我們的目的。

什麼是 Expo SecureStore

Expo SecureStore 顧名思義是一個由 Expo 提供的一種安全、持久化的儲存方案。它允許我們保存小段資料，例如設定、用戶偏好或待辦事項等，並且具有一定的安全性。可以想成是網頁中的 localStorage，但不同於一般的 localStorage，SecureStore 提供加密功能，這意味著保存的資料在被存儲時是加密的，這為資料的安全提供了一定的保障。

安裝 Expo SecureStore

npx expo install expo-secure-store

在 Context Store 使用 Expo SecureStore

接下來，會在 context store 中加入 Expo SecureStore 的使用。這樣每當 App 的狀態改變時，我們都可以即時將其保存到本地端，並在 App 啟動時讀取這些保存的資料。

// src/store/index.js
import { createContext, useReducer, useEffect } from 'react'
import * as SecureStore from 'expo-secure-store'

首先，從 React 引入必要的部分 useEffect，等一下會負責監聽資料變更儲存，以及初始化資料的部分，以及今天的主角 SecureStore。

const reducer = (state, action) => {
  // 省略其他的 action handlers...
  
  case 'LOAD_STATE':
    return action.payload
  
  // 省略其他的 action handlers...
}

在我們的 reducer 中，我們加入了一個新的 action handler LOAD_STATE，主要負責從 SecureStore 中讀取資料狀態。

接著，在 StoreProvider 內，使用了兩個 useEffect。第一個是用來讀取資料，第二個是用來保存資料。

useEffect(() => {
  const loadData = async () => {
    const savedState = await SecureStore.getItemAsync('savedState')
    if (savedState) {
      dispatch({ type: 'LOAD_STATE', payload: JSON.parse(savedState) })
    }
  }
  loadData()
}, [])

在第一個 useEffect 中，會嘗試從 SecureStore 讀取名為 savedState 的部分資料。如果該資料存在，會將其用 JSON.parse 解析並通過 dispatch 更新狀態。

useEffect(() => {
  const saveData = async () => {
    await SecureStore.setItemAsync('savedState', JSON.stringify(state))
  }
  saveData()
}, [state])

而第二個 useEffect 則是在每次 state 改變時觸發，將當前的狀態保存到 SecureStore。

現在資料就可以儲存在手機中了，重新整理或是重開 App，資料也不會不見。

總結

今天示範了待辦事項的儲存功能，這也代表 Todo List App 已經更加完善和可靠。而且通過使用 Expo SecureStore，確保了資料的安全性和可靠性。

明天將會開始一個新的專案，那就是即時天氣 App！這會是一個非常有趣的專案，會展示更多的 React Native，明天見👋！