Redux Toolkit é uma biblioteca popular que simplifica o desenvolvimento do Redux, fornecendo um conjunto de utilitários e convenções. Inclui um redutor e padrões de criação de ações que agilizam o processo de escrita da lógica Redux. Combinar Redux Persist com Redux Toolkit pode melhorar significativamente a eficiência e a confiabilidade do gerenciamento de estado em seus aplicativos React Native.

expo-file-system fornece acesso a um sistema de arquivos armazenado localmente no dispositivo. Também é capaz de fazer upload e download de arquivos de URLs de rede

redux-persist-expo-file-system-storage é um mecanismo de armazenamento para redux-persist que usa a API do sistema de arquivos da Expo. Isso permite que você persista o estado da sua loja Redux no sistema de arquivos do dispositivo, garantindo que o estado seja salvo e restaurado mesmo se o aplicativo for fechado ou reiniciado.

Depois de configurar sua loja Redux Toolkit, você pode integrar o Redux Persist. Comece instalando as dependências necessárias:

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

criamos uma loja Redux simples @reduxjs/toolkit para gerenciar um estado de contador. Definimos um estado inicial com contagem 0 e criamos uma fatia chamada contador com dois redutores: incremento e decremento, que aumentam e diminuem a contagem em 1, respectivamente. As ações e o redutor são exportados para uso em nossa configuração Redux, permitindo-nos gerenciar facilmente o estado do contador em toda a aplicação.

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

O código configura um armazenamento Redux em um aplicativo React Native usando @reduxjs/toolkit e redux-persist com FileSystem da Expo para armazenamento persistente. Ele combina redutores, incluindo um contador redutor, e garante que seu estado seja salvo e carregado de um diretório especificado no sistema de arquivos do aplicativo.

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

Nesta parte da configuração, configuramos e criamos a loja Redux usando @reduxjs/toolkit. Importamos o rootReducer que combina nossos redutores e desabilitamos o middleware serializableCheck para evitar que erros de serialização persistam. Também configuramos redux-persist para habilitar a persistência de estado e exportar tanto o armazenamento quanto o persistor para integração com nosso aplicativo React Native. Essa configuração garante que o estado do nosso aplicativo seja mantido mesmo depois de fechado ou atualizado.

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

Ao registrar e compreender o caminho do documentDirectory no arquivo configureStore, você obtém informações valiosas sobre onde seus dados do Redux Persist estão armazenados em um ambiente Expo. Esse conhecimento não apenas ajuda na depuração, mas também garante que sua estratégia de persistência de dados seja robusta e segura. Agora você pode gerenciar com segurança o estado do seu aplicativo, sabendo exatamente onde estão seus dados.

Dentro deste diretório, redux-persist armazenará seu estado persistido. Normalmente, os dados persistidos são armazenados em um arquivo denominado persist-counter (ou algo semelhante, dependendo da sua configuração). Veja como você pode navegar e visualizar este arquivo:

// persist-count file

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

Para um exemplo completo, você pode verificar o repositório GitHub para este projeto: Link do repositório GitHub

? Eu adoraria ouvir sua opinião sobre este assunto! Se você tiver alguma dúvida sobre como usar o Expo File System com Redux Persist, ou se tiver algum problema, deixe um comentário abaixo. Estou aqui para ajudar! ?