Redux Toolkit、ファイル システム、および Redux Persist を使用した Expo: 包括的なガイド

Redux Toolkit は、一連のユーティリティと規約を提供することで Redux 開発を簡素化する人気のあるライブラリです。これには、Redux ロジックの作成プロセスを効率化するリデューサーとアクション作成パターンが含まれています。 Redux Persist と Redux Toolkit を組み合わせると、React Native アプリの状態管理の効率と信頼性が大幅に向上します。

expo-file-system は、デバイス上にローカルに保存されているファイル システムへのアクセスを提供します。ネットワーク URL からファイルをアップロードおよびダウンロードすることもできます

redux-persist-expo-file-system-storage は、Expo のファイル システム API を使用する redux-persist 用のストレージ エンジンです。これにより、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 ストア @reduxjs/toolkit を作成します。カウント 0 の初期状態を定義し、カウントをそれぞれ 1 ずつ増加および減少させる 2 つのリデューサー (インクリメントとデクリメント) を備えた counter という名前のスライスを作成します。アクションとリデューサーは 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 ストアを構成および作成します。リデューサーを結合する rootReducer をインポートし、redux-persist によるシリアル化エラーを防ぐために、serializableCheck ミドルウェアを無効にします。また、状態の永続性を有効にし、React Native アプリケーションと統合するためにストアとパーシスターの両方をエクスポートするために redux-persist をセットアップしました。この構成により、アプリが閉じられたり更新された後でも、アプリの状態が確実に維持されます。

// 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 File System と Redux Persist の使用について質問がある場合、または問題が発生した場合は、以下にコメントを入力してください。私は助けに来ました！ ?

以上がRedux Toolkit、ファイル システム、および Redux Persist を使用した Expo: 包括的なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。