Expo with Redux Toolkit、檔案系統與 Redux Persist：綜合指南

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