DEV Community: Dennis Zimmermann

When redux-persist meets Expo FileSystem

Dennis Zimmermann — Mon, 04 Mar 2024 18:47:04 +0000

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? ⭐️

How to replace Environment Variables in a .npmrc File

Dennis Zimmermann — Fri, 16 Feb 2024 11:14:20 +0000

Managing npm registry configurations and authentication tokens can be a tricky task, especially when working collaboratively on multiple projects and environments. To simplify this process, I've created a package called npmrc-replace-env.

Why?

So, picture this – we're deep into a project, and suddenly, we need this secret _authToken in our .npmrc file to access some essential packages (e.g. @fortawesome pro version 😉). Cool, but how do we share this without risking our repo's security or making everyone's life complicated?

That's the snag I hit, and it got me thinking. I needed a way to smoothly pass around this _authToken, making sure everyone gets what they need without committing it to our codebase.

The goal? To make life easier for all of us – no headaches, no communication chaos, and definitely no disruptions to our coding vibe. I wanted something straightforward that could handle this kind of situation in other projects too.

And voila, npmrc-replace-env was born!

npmrc-replace-env is a utility designed to dynamically generate .npmrc files based on configuration and environment variables.

By having a committed .npmrc.config file as a template, you're basically giving your team a shortcut. They only need to worry about updating their .env file with their environment variables, and bam, they're good to go. No more wrestling with the entire .npmrc file, no more back-and-forth to keep everyone on the same page 🎉.

How It Works

This package follows a simple yet powerful approach. The magic begins with the .npmrc.config file in your project's root. This file outlines the configuration for your .npmrc file, with placeholders serving as markers for environment variables to be injected.

Example .npmrc.config:

# .npmrc.config

# Custom registry for @myorg packages
@myorg:registry=https://somewhere-else.com/myorg
//somewhere-else.com/myorg/:_authToken=NPMRC_MYTOKEN1

# Custom registry for @another packages
@another:registry=https://somewhere-else.com/another
//somewhere-else.com/another/:_authToken=NPMRC_MYTOKEN2

# Custom registry for @fortawesome packages
@fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=NPMRC_FA_AUTH_TOKEN

In this example, the .npmrc.config file defines custom registries. The authentication tokens are provided as environment variables (NPMRC_MYTOKEN1, NPMRC_MYTOKEN2, and NPMRC_FA_AUTH_TOKEN), which will be replaced during the generation process.

It's important to add .npmrc to your .gitignore file to prevent accidentally committing sensitive information, such as authentication tokens.

Next, define your environment variables in the .env file, each prefixed with NPMRC_. Each placeholder in the .npmrc.config file corresponds to an environment variable defined here.

Example .env file:

NPMRC_MYTOKEN1=your_myorg_token_value
NPMRC_MYTOKEN2=your_another_token_value
NPMRC_FA_AUTH_TOKEN=your_fontawesome_token_value

With everything set up, execute the following command:

npx npmrc-replace-env

Keep in mind: This will override any existing .npmrc files.

Explore npmrc-replace-env

If npmrc-replace-env has made your development life easier, consider showing some love on GitHub ⭐️.

Discover more about npmrc-replace-env by checking out the npm package. Dive into the GitHub repository for detailed documentation, updates, and opportunities to contribute.

Happy coding! 👨‍💻