首頁  >  文章  >  web前端  >  Expo with Redux Toolkit、檔案系統與 Redux Persist:綜合指南

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

PHPz
PHPz原創
2024-08-30 18:33:32649瀏覽

Expo with Redux Toolkit, File System, and Redux Persist: A Comprehensive Guide

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn