Expo mit Redux Toolkit, Dateisystem und Redux Persist: Ein umfassender Leitfaden

Redux Toolkit ist eine beliebte Bibliothek, die die Redux-Entwicklung vereinfacht, indem sie eine Reihe von Dienstprogrammen und Konventionen bereitstellt. Es enthält einen Reduzierer und Aktionserstellungsmuster, die den Prozess des Schreibens von Redux-Logik rationalisieren. Die Kombination von Redux Persist mit Redux Toolkit kann die Effizienz und Zuverlässigkeit der Zustandsverwaltung in Ihren React Native-Apps erheblich verbessern.

expo-file-system bietet Zugriff auf ein lokal auf dem Gerät gespeichertes Dateisystem. Es ist auch in der Lage, Dateien von Netzwerk-URLs hoch- und herunterzuladen

redux-persist-expo-file-system-storage ist eine Speicher-Engine für redux-persist, die die Dateisystem-API von Expo verwendet. Dadurch können Sie den Status Ihres Redux-Stores im Dateisystem des Geräts beibehalten und so sicherstellen, dass der Status auch dann gespeichert und wiederhergestellt wird, wenn die App geschlossen oder neu gestartet wird.

Sobald Sie Ihren Redux Toolkit Store konfiguriert haben, können Sie Redux Persist integrieren. Beginnen Sie mit der Installation der erforderlichen Abhängigkeiten:

npm i @reduxjs/toolkit 
npm i expo-file-system 
npm i redux-persist-expo-file-system-storage
npm i redux-persist

Wir erstellen einen einfachen Redux-Store @reduxjs/toolkit, um einen Zählerstatus zu verwalten. Wir definieren einen Anfangszustand mit einem Zählerstand von 0 und erstellen einen Slice namens Zähler mit zwei Reduzierern: Inkrementieren und Dekrementieren, die den Zählerstand jeweils um 1 erhöhen bzw. verringern. Die Aktionen und der Reduzierer werden zur Verwendung in unserem Redux-Setup exportiert, sodass wir den Zählerstand in der gesamten Anwendung einfach verwalten können.

// 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;

Der Code richtet einen Redux-Store in einer React Native-App mithilfe von @reduxjs/toolkit und redux-persist mit Expos FileSystem für dauerhafte Speicherung ein. Es kombiniert Reduzierer, einschließlich eines Zählerreduzierers, und stellt sicher, dass ihr Status gespeichert und aus einem angegebenen Verzeichnis im Dateisystem der App geladen wird.

// 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;

In diesem Teil des Setups konfigurieren und erstellen wir den Redux-Store mit @reduxjs/toolkit. Wir importieren den rootReducer, der unsere Reduzierer kombiniert, und deaktivieren die SerializableCheck-Middleware, um Serialisierungsfehler durch Redux-Persist zu verhindern. Wir haben außerdem redux-persist eingerichtet, um die Zustandspersistenz zu ermöglichen und sowohl den Store als auch den Persistor für die Integration in unsere React Native-Anwendung zu exportieren. Diese Konfiguration stellt sicher, dass der Status unserer App auch nach dem Schließen oder Aktualisieren erhalten bleibt.

// 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 };

Durch die Protokollierung und das Verständnis des documentDirectory-Pfads in der configureStore-Datei erhalten Sie wertvolle Erkenntnisse darüber, wo Ihre Redux Persist-Daten in einer Expo-Umgebung gespeichert sind. Dieses Wissen hilft nicht nur beim Debuggen, sondern stellt auch sicher, dass Ihre Datenpersistenzstrategie robust und sicher ist. Jetzt können Sie den Status Ihrer App sicher verwalten und wissen genau, wo Ihre Daten gespeichert sind.

In diesem Verzeichnis speichert redux-persist Ihren persistenten Zustand. Typischerweise werden die persistenten Daten in einer Datei mit dem Namen persist-counter (oder etwas Ähnlichem, abhängig von Ihrer Konfiguration) gespeichert. So können Sie zu dieser Datei navigieren und sie anzeigen:

// persist-count file

{"count":"0","_persist":"{\"version\":-1,\"rehydrated\":true}"}

Ein vollständiges Beispiel finden Sie im GitHub-Repository für dieses Projekt: GitHub Repository Link

? Ich würde gerne Ihre Gedanken zu diesem Thema hören! Wenn Sie Fragen zur Verwendung des Expo File System mit Redux Persist haben oder auf Probleme stoßen, hinterlassen Sie bitte unten einen Kommentar. Ich bin hier, um zu helfen! ?

Das obige ist der detaillierte Inhalt vonExpo mit Redux Toolkit, Dateisystem und Redux Persist: Ein umfassender Leitfaden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!