Redux persist filesystem storage

Storage adaptor to use react-native-blob-util with redux-persist, by implementing the needed methods: setItem, getItem, removeItem, getAllKeys and clear.

This storage can be used on Android to prevent issues with the storage limitations in the RN AsyncStorage implementation. (See redux-persist#199, redux-persist#284)

install

Please note: v2 of this library supports React Native 0.60 and above only. If you are using React Native 0.59 and below, please use v1.x.

1yarn add redux-persist-filesystem-storage

or, for React Native 0.59 and below:

1yarn add redux-persist-filesystem-storage@1

Then, as react-native-blob-util is a dependency of this project, it will also need setting up as its their installation docs.

usage

Simply use 'FilesystemStorage' as the storage option in the redux-persist config.

1import FilesystemStorage from 'redux-persist-filesystem-storage'
2...
3
4const persistConfig = {
5  key: 'root',
6  storage: FilesystemStorage,
7}
8
9...

usage with custom options

1import FilesystemStorage from 'redux-persist-filesystem-storage'
2...
3
4// These are all the config options, with their default values
5FilesystemStorage.config({
6     storagePath: `${RNFetchBlob.fs.dirs.DocumentDir}/persistStore`,
7     encoding: "utf8",
8     toFileName: (name: string) => name.split(":").join("-"),
9     fromFileName: (name: string) => name.split("-").join(":"),
10});
11
12const persistConfig = {
13  key: 'root',
14  storage: FilesystemStorage,
15  toFileName: (name: string) => name.split(":").join("-"),
16  fromFileName: (name: string) => name.split("-").join(":")
17}
18
19...

migration from previous storage

Using redux-persist V5?

Redux-Persist v5 migrate from one storage system to another

Using redux-persist V4?

the snippet below lets you migrate redux data previously stored in AsyncStorage to redux-persist-filesystem-storage.

NOTE This snippet lets you migrate healthy data. It will not restore data if it is already hit limits of AsyncStorage

1import { persistStore, getStoredState } from 'redux-persist'
2import FilesystemStorage from 'redux-persist-filesystem-storage'
3import { AsyncStorage } from 'react-native'
4import _ from 'lodash'
5import { createStore } from 'redux'
6
7const store = createStore(...)
8
9// create persistor for `redux-persist-filesystem-storage`
10const fsPersistor = persistStore(
11  store,
12  { storage: FilesystemStorage },
13  async (fsError, fsResult) => {
14    if (_.isEmpty(fsResult)) {
15      // if state from fs storage is empty try to read state from previous storage
16      try {
17        const asyncState = await getStoredState({ storage: AsyncStorage })
18        if (!_.isEmpty(asyncState)) {
19          // if data exists in `AsyncStorage` - rehydrate fs persistor with it
20          fsPersistor.rehydrate(asyncState, { serial: false })
21        }
22      } catch (getStateError) {
23        console.warn("getStoredState error", getStateError)
24      }
25    }
26  }
27)