Redux Toolkit 是一個受歡迎的函式庫,它透過提供一組實用程式和約定來簡化 Redux 開發。它包括一個減速器和動作創建模式,可以簡化編寫 Redux 邏輯的過程。將 Redux Persist 與 Redux Toolkit 結合可以顯著提高 React Native 應用程式中狀態管理的效率和可靠性。
expo-file-system 提供對裝置本機儲存的檔案系統的存取。它也能夠從網頁 URL 上傳和下載檔案
redux-persist-expo-file-system-storage 是 redux-persist 的一個儲存引擎,使用 Expo 的檔案系統 API。這允許您將 Redux 儲存的狀態保存到裝置的檔案系統,確保即使應用程式關閉或重新啟動也能保存和恢復狀態。
配置完 Redux Toolkit 儲存後,您可以整合 Redux Persist。首先安裝必要的依賴項:
npm i @reduxjs/toolkit npm i expo-file-system npm i redux-persist-expo-file-system-storage npm i redux-persist
我們建立一個簡單的 Redux store @reduxjs/toolkit 來管理計數器狀態。我們定義一個計數為 0 的初始狀態,並建立一個名為 counter 的切片,它有兩個減速器:increment 和 decrement,分別將計數增加 1 和減少 1。操作和減速器被匯出以在我們的 Redux 設定中使用,使我們能夠輕鬆管理整個應用程式中的計數器狀態。
// store/counter/counter.tsx import { createSlice } from "@reduxjs/toolkit"; const initialState = { count: 0, }; const counterSlice = createSlice({ name: "couter", initialState, reducers: { increment: (state) => { state.count += 1; }, decrement: (state) => { state.count -= 1; }, }, }); export const { increment, decrement } = counterSlice.actions; export default counterSlice.reducer;
程式碼使用 @reduxjs/toolkit 在 React Native 應用程式中設定 Redux 存儲,並使用 Expo 的 FileSystem 進行持久儲存的 redux-persist 。它結合了減速器,包括計數器減速器,並確保從應用程式檔案系統內的指定目錄保存和載入它們的狀態。
// store/ConfigureStore.js import { combineReducers } from "@reduxjs/toolkit"; import { documentDirectory, EncodingType } from "expo-file-system"; import { createExpoFileSystemStorage } from "redux-persist-expo-file-system-storage"; import CounterReducer from "./counter/counter"; import { persistReducer } from "redux-persist"; console.log('Document Directory:',documentDirectory); export const expoFileSystemStorage = createExpoFileSystemStorage({ storagePath: `${documentDirectory}customPathName/`, encoding: EncodingType.UTF8, debug: true, }); const persist = (key, reducer) => persistReducer( { key, storage: expoFileSystemStorage, }, reducer ); const combinePersistReducers = (keys) => Object.keys(keys).reduce( (obj, key) => ({ ...obj, [key]: persist(key, keys[key]), }), {} ); const reducers = combineReducers({ ...combinePersistReducers({ count: CounterReducer, }), }); export default reducers;
在這部分設定中,我們使用 @reduxjs/toolkit 配置和建立 Redux 儲存。我們匯入結合了reducers的rootReducer並停用serializedCheck中間件以防止redux-persist產生序列化錯誤。我們還設定了 redux-persist 來啟用狀態持久性並匯出儲存和持久器以與我們的 React Native 應用程式整合。此配置可確保我們的應用程式即使在關閉或刷新後也能保持其狀態。
// store/index.js import { configureStore } from "@reduxjs/toolkit"; import { persistStore } from "redux-persist"; import { Provider } from "react-redux"; import rootReducer from "./ConfigureStore"; const store = configureStore({ reducer: rootReducer, middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: false, }), }); const persistor = persistStore(store); export { store, persistor };
透過記錄和了解 configureStore 檔案中的 documentDirectory 路徑,您可以深入了解 Redux Persist 資料在 Expo 環境中的儲存位置。這些知識不僅有助於調試,還可以確保您的資料持久性策略穩健且安全。現在,您可以自信地管理應用程式的狀態,並準確地了解資料的位置。
在此目錄中,redux-persist 將儲存您的持久狀態。通常,持久性資料會儲存在名為 persist-counter (或類似名稱,取決於您的配置)的檔案中。以下是導航到並查看此文件的方法:
// persist-count file {"count":"0","_persist":"{\"version\":-1,\"rehydrated\":true}"}
有關完整的範例,您可以查看該專案的 GitHub 儲存庫:GitHub 儲存庫連結
?我很想聽聽您對這個主題的想法!如果您對將 Expo 檔案系統與 Redux Persist 結合使用有任何疑問,或遇到任何問題,請在下面發表評論。我是來幫忙的! ?
以上是Expo with Redux Toolkit、檔案系統與 Redux Persist:綜合指南的詳細內容。更多資訊請關注PHP中文網其他相關文章!