Redux Toolkit est une bibliothèque populaire qui simplifie le développement Redux en fournissant un ensemble d'utilitaires et de conventions. Il comprend un réducteur et des modèles de création d'actions qui rationalisent le processus d'écriture de la logique Redux. La combinaison de Redux Persist avec Redux Toolkit peut améliorer considérablement l'efficacité et la fiabilité de la gestion des états dans vos applications React Native.

expo-file-system donne accès à un système de fichiers stocké localement sur l'appareil. Il est également capable de télécharger des fichiers à partir d'URL de réseau

redux-persist-expo-file-system-storage est un moteur de stockage pour redux-persist qui utilise l'API du système de fichiers d'Expo. Cela vous permet de conserver l'état de votre boutique Redux dans le système de fichiers de l'appareil, garantissant que l'état est enregistré et restauré même si l'application est fermée ou redémarrée.

Une fois que vous avez configuré votre magasin Redux Toolkit, vous pouvez intégrer Redux Persist. Commencez par installer les dépendances nécessaires :

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

nous créons un simple magasin Redux @reduxjs/toolkit pour gérer un état de compteur. Nous définissons un état initial avec un compte de 0 et créons une tranche nommée compteur avec deux réducteurs : incrément et décrémentation, qui augmentent et diminuent le compte de 1, respectivement. Les actions et le réducteur sont exportés pour être utilisés dans notre configuration Redux, nous permettant de gérer facilement l'état du compteur dans toute l'application.

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

Le code configure un magasin Redux dans une application React Native à l'aide de @reduxjs/toolkit et redux-persist avec le système de fichiers d'Expo pour le stockage persistant. Il combine des réducteurs, y compris un compteur-réducteur, et garantit que leur état est enregistré et chargé à partir d'un répertoire spécifié dans le système de fichiers de l'application.

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

Dans cette partie de la configuration, nous configurons et créons le magasin Redux à l'aide de @reduxjs/toolkit. Nous importons le rootReducer qui combine nos réducteurs et désactivons le middleware sérialisableCheck pour empêcher les erreurs de sérialisation de redux-persist. Nous avons également configuré redux-persist pour activer la persistance de l'état et exporter à la fois le magasin et le persistant pour l'intégration avec notre application React Native. Cette configuration garantit que l'état de notre application est maintenu même après sa fermeture ou son actualisation.

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

En enregistrant et en comprenant le chemin documentDirectory dans le fichier configureStore, vous obtenez des informations précieuses sur l'endroit où vos données Redux Persist sont stockées dans un environnement Expo. Ces connaissances aident non seulement au débogage, mais garantissent également que votre stratégie de persistance des données est robuste et sécurisée. Vous pouvez désormais gérer en toute confiance l'état de votre application, en sachant exactement où se trouvent vos données.

Dans ce répertoire, redux-persist stockera votre état persistant. En règle générale, les données persistantes sont stockées dans un fichier nommé persist-counter (ou quelque chose de similaire, selon votre configuration). Voici comment accéder à ce fichier et l'afficher :

// persist-count file

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

Pour un exemple complet, vous pouvez consulter le référentiel GitHub de ce projet : GitHub Repository Link

 ? J’aimerais connaître votre avis sur ce sujet ! Si vous avez des questions sur l'utilisation d'Expo File System avec Redux Persist, ou si vous rencontrez des problèmes, veuillez laisser un commentaire ci-dessous. Je suis là pour vous aider ! ?