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中文网其他相关文章！