Redux Toolkit es una biblioteca popular que simplifica el desarrollo de Redux al proporcionar un conjunto de utilidades y convenciones. Incluye un reductor y patrones de creación de acciones que agilizan el proceso de escritura de la lógica de Redux. Combinar Redux Persist con Redux Toolkit puede mejorar significativamente la eficiencia y confiabilidad de la administración del estado en sus aplicaciones React Native.

expo-file-system proporciona acceso a un sistema de archivos almacenado localmente en el dispositivo. También es capaz de cargar y descargar archivos desde URL de red

redux-persist-expo-file-system-storage es un motor de almacenamiento para redux-persist que utiliza la API del sistema de archivos de Expo. Esto le permite conservar el estado de su tienda Redux en el sistema de archivos del dispositivo, lo que garantiza que el estado se guarde y se restaure incluso si la aplicación se cierra o se reinicia.

Una vez que haya configurado su tienda Redux Toolkit, puede integrar Redux Persist. Comience instalando las dependencias necesarias:

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

creamos una tienda Redux simple @reduxjs/toolkit para administrar el estado del contador. Definimos un estado inicial con un recuento de 0 y creamos un segmento llamado contador con dos reductores: incremento y decremento, que aumentan y disminuyen el recuento en 1, respectivamente. Las acciones y el reductor se exportan para usarlos en nuestra configuración de Redux, lo que nos permite administrar fácilmente el estado del contador en toda la aplicación.

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

El código configura una tienda Redux en una aplicación React Native usando @reduxjs/toolkit y redux-persist con el FileSystem de Expo para almacenamiento persistente. Combina reductores, incluido un reductor de contador, y garantiza que su estado se guarde y cargue desde un directorio específico dentro del sistema de archivos de la aplicación.

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

En esta parte de la configuración, configuramos y creamos la tienda Redux usando @reduxjs/toolkit. Importamos el rootReducer que combina nuestros reductores y deshabilitamos el middleware serializableCheck para evitar que los errores de serialización persistan en redux. También configuramos redux-persist para habilitar la persistencia del estado y exportar tanto el almacén como el persistente para la integración con nuestra aplicación React Native. Esta configuración garantiza que el estado de nuestra aplicación se mantenga incluso después de cerrarla o actualizarla.

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

Al registrar y comprender la ruta del directorio de documentos en el archivo configureStore, obtendrá información valiosa sobre dónde se almacenan sus datos de Redux Persist en un entorno de Expo. Este conocimiento no sólo ayuda en la depuración, sino que también garantiza que su estrategia de persistencia de datos sea sólida y segura. Ahora puedes administrar con confianza el estado de tu aplicación y saber exactamente dónde se encuentran tus datos.

Dentro de este directorio, redux-persist almacenará su estado persistente. Normalmente, los datos persistentes se almacenan en un archivo llamado persist-counter (o algo similar, según su configuración). Así es como puede navegar y ver este archivo:

// persist-count file

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

Para ver un ejemplo completo, puedes consultar el repositorio de GitHub para este proyecto: Enlace al repositorio de GitHub

? ¡Me encantaría escuchar tu opinión sobre este tema! Si tiene alguna pregunta sobre el uso de Expo File System con Redux Persist, o si tiene algún problema, deje un comentario a continuación. ¡Estoy aquí para ayudar! ?