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中文網其他相關文章！
