When redux-persist meets Expo FileSystem

In the world of react(-native) development, where efficient state management is essential, redux-persist has proven to be a reliable tool. Today, I introduce a practical companion specifically designed for react-native / expo apps - redux-persist-expo-file-system-storage. Instead of a major overhaul, consider this as a seamless enhancement that optimizes state persistence in your applications.

So, What Exactly is redux-persist?

redux-persist is designed to handle state persistence in redux applications. It integrates with redux to automatically save the application's state to a storage system (e.g., local storage, AsyncStorage) and then restores it upon subsequent app launches. This enables developers to maintain the state across sessions, enhancing user experience by preserving data and application state.

AsyncStorage Size Limitations on Android: What You Need to Know

Dealing with storage limitations on Android, particularly with AsyncStorage, can be challenging. When the storage reaches its maximum size, data may be deleted or stored information may fail to display, leading to severe consequences for established apps. In addition to AsyncStorage, Android's storage system imposes two main constraints: total storage size limits and per-entry size limits. It is essential to explore alternatives not only to overcome size restrictions but also to handle such scenarios more gracefully. Keep in mind that AsyncStorage for Android relies on SQLite as its storage backend, introducing its own set of size limitations.

Introducing redux-persist-expo-file-system-storage

redux-persist-expo-file-system-storage is a specialized storage engine within redux-persist, leverages expo-file-system to enhance state persistence.

In a landscape with existing alternatives, redux-persist-expo-file-system-storage distinguishes itself by focusing on flexibility, extensibility, and robust debugging capabilities specifically tailored for react-native / expo apps.

Key Features

• Written in TypeScript: Complete TypeScript support for improved type safety and development experience.

• Extensibility: Designed to be easily extended with options for customizing storage behavior through various callbacks.

• Configurability: Fine-tune the storage engine with a variety of options, making it adaptable to different project requirements.

• Debug Mode: Enable the debug mode for detailed logs during development, helping you troubleshoot and understand the library's actions.

• Custom Logging: Utilize your own logger functions for debug and error messages, allowing seamless integration with your application's logging strategy.

Installation and Usage

Choose your preferred package manager and add redux-persist-expo-file-system-storage to your project, e.g.:

yarn add redux-persist-expo-file-system-storage

After installation, you're ready to integrate the storage engine into your setup for seamless state persistence 🥳.

Here's a simple example demonstrating how to integrate redux-persist-expo-file-system-storage into your application:

import * as FileSystem from "expo-file-system";
import { createExpoFileSystemStorage, type StorageOptions } from 'redux-persist-expo-file-system-storage';
import type { PersistConfig } from "redux-persist";
import { rootReducer, type RootState } from './store.config';

// either without custom options 
export const expoFileSystemStorage = createExpoFileSystemStorage();

// or with custom options
export const expoFileSystemStorage = createExpoFileSystemStorage({
    storagePath: `${FileSystem.documentDirectory}customPersistStorageData/`,
    encoding: FileSystem.EncodingType.BASE64,
    debug: true,
    logger: {
        debug: customDebugFunction,
        error: customErrorFunction,
    },
    beforeInit: customBeforeInitFunction,
    afterInit: customAfterInitFunction,
}),

// configuration for redux-ersist
const persistConfig: PersistConfig<RootState> = {
  key: 'root',
  // Use the expoFileSystemStorage as the storage engine
  storage: expoFileSystemStorage,
  // ... Add other persist config options if needed
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = configureStore({
    reducer: persistedReducer,
    // ... Add other config options if needed
});

For detailed instructions on installing and utilizing redux-persist-expo-file-system-storage, check out the official documentation.

In Conclusion

If you're looking to improve state persistence in your react-native / expo applications, redux-persist-expo-file-system-storage is a great tool to consider. With a variety of features to enhance state management, it's definitely worth exploring.

Have you found redux-persist-expo-file-system-storage to be helpful in your development journey? If so, why not spread the love on GitHub? ⭐️