Git Product home page Git Product logo

redux-persist-filesystem-storage's Introduction

Redux persist filesystem storage

npm version npm downloads

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.

yarn add redux-persist-filesystem-storage

or, for React Native 0.59 and below:

yarn 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.

import FilesystemStorage from 'redux-persist-filesystem-storage'
...

const persistConfig = {
  key: 'root',
  storage: FilesystemStorage,
}

...

usage with custom options

import FilesystemStorage from 'redux-persist-filesystem-storage'
...

// These are all the config options, with their default values
FilesystemStorage.config({
     storagePath: `${RNFetchBlob.fs.dirs.DocumentDir}/persistStore`,
     encoding: "utf8",
     toFileName: (name: string) => name.split(":").join("-"),
     fromFileName: (name: string) => name.split("-").join(":"),
});

const persistConfig = {
  key: 'root',
  storage: FilesystemStorage,
  toFileName: (name: string) => name.split(":").join("-"),
  fromFileName: (name: string) => name.split("-").join(":")
}

...

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

import { persistStore, getStoredState } from 'redux-persist'
import FilesystemStorage from 'redux-persist-filesystem-storage'
import { AsyncStorage } from 'react-native'
import _ from 'lodash'
import { createStore } from 'redux'

const store = createStore(...)

// create persistor for `redux-persist-filesystem-storage`
const fsPersistor = persistStore(
  store,
  { storage: FilesystemStorage },
  async (fsError, fsResult) => {
    if (_.isEmpty(fsResult)) {
      // if state from fs storage is empty try to read state from previous storage
      try {
        const asyncState = await getStoredState({ storage: AsyncStorage })
        if (!_.isEmpty(asyncState)) {
          // if data exists in `AsyncStorage` - rehydrate fs persistor with it
          fsPersistor.rehydrate(asyncState, { serial: false })
        }
      } catch (getStateError) {
        console.warn("getStoredState error", getStateError)
      }
    }
  }
)

redux-persist-filesystem-storage's People

Contributors

andrewzey avatar brunolemos avatar davidliu avatar dependabot[bot] avatar draperunner avatar fiznool avatar freddy03h avatar froelund avatar maxkomarychev avatar nico1510 avatar robwalkerco avatar rt2zz avatar timrobinson1 avatar yestay90 avatar zabojad avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

redux-persist-filesystem-storage's Issues

Crash if react-native-blob-util >014 is installed

Currently this library isn't compatible with react-native-blob-util > 0.14
There is already a PR fixing this: #60
If react-native-blob-util > 0.14 is installed the app will crash due to a missmatch of function signatures.

Could we get the PR merged please?

Update to Promise based api

redux-persist just switched to requiring promise based storage in v5.0.0-beta.13

Unfortunately it is going to be a pain to get everyone updated. Technically the storage can support both (like AsyncStorage and localforage) but since this module is specific to redux-persist may was well just go 100% promises and make the peer dep be redux-persist@5

typeError: Cannot read properties of undefined (reading 'DocumentDir') on Android

I am getting this error after installing the library.

typeError: Cannot read properties of undefined (reading 'DocumentDir')

package.json

"dependencies": { "@react-native-async-storage/async-storage": "^1.15.13", "@react-native-community/datetimepicker": "^3.5.2", "@react-native-community/masked-view": "^0.1.10", "@react-native-community/netinfo": "^7.1.2", "@react-navigation/bottom-tabs": "^5.10.2", "@react-navigation/native": "^5.8.2", "@react-navigation/stack": "^5.11.1", "axios": "^0.24.0", "http-status-codes": "^2.1.4", "lodash": "^4.17.20", "moment": "^2.29.1", "prop-types": "^15.7.2", "react": "17.0.2", "react-native": "0.64.2", "react-native-camera": "^4.2.1", "react-native-dots-pagination": "^0.2.0", "react-native-gesture-handler": "1.10.3", "react-native-gifted-chat": "^0.16.3", "react-native-linear-gradient": "^2.5.6", "react-native-modal-datetime-picker": "^13.0.0", "react-native-onesignal": "^4.3.3", "react-native-permissions": "^3.1.0", "react-native-qrcode-scanner": "^1.5.4", "react-native-qrcode-svg": "^6.1.1", "react-native-raw-bottom-sheet": "^2.2.0", "react-native-reanimated": "^2.2.0", "react-native-safe-area-context": "^3.1.8", "react-native-screens": "^3.4.0", "react-native-size-matters": "^0.4.0", "react-native-smooth-pincode-input": "^1.0.9", "react-native-splash-screen": "^3.2.0", "react-native-svg": "^12.1.0", "react-native-swiper": "^1.6.0", "react-native-toast-message": "^2.0.1", "react-native-vector-icons": "^8.1.0", "react-redux": "^7.2.6", "redux": "^4.1.2", "redux-logger": "^3.0.6", "redux-persist": "^6.0.0", "redux-persist-filesystem-storage": "^4.0.0", "redux-saga": "^1.1.3", "reselect": "^4.1.5" },

store.js
`
import FilesystemStorage from 'redux-persist-filesystem-storage'

const persistConfig = {
key: 'root',
storage: FilesystemStorage,
}
`

Android version: 11

Default Storage Path not a good idea

I'm seeing that ya'll are setting the defaultStoragePath to

const defaultStoragePath = `${RNFetchBlob.fs.dirs.DocumentDir}/persistStore`

Which is then used as the config for rn-fetch-blob.

Correct me if I'm wrong, but this means that on every app update (at least on iOS) the storage will become severed from the next version of the app since DocumentDir is a UUID that is generated from the app release.

The effect is that each time the app updates the storage is marooned, and a new empty state from redux-persist will begin...

I may be incorrect here, but if anyone else is noticing this happening (maybe it's just on TestFlight?) I would suggest changing the defaultStoragePath to either be a static directory, or something we can pass into as a config for redux-persist-filesystem-storage.

For now, I'm going to build a migration that checks if prevDocumentDir !== DocumentDir, and if so - mv the files to the new directory.. this is wacko and shouldn't be something a developer should need to do IMO

Size of Store

Anyone tells me what is the maximum size of this library store.
like AsyncStorage can store 6MB data.
how much data this lib can store?

Documentation says to pass FilesystemStorage to persistStore instead of persistReducer

Using latest version of redux-persist ("^5.10.0") and redux-persist-filesystem-storage ("^1.3.1").

The documentation says to pass the FilesystemStorage to persistStore, like so:

persistStore(
  store,
  {
    storage: FilesystemStorage,
  },
)

I was only able to get this module to function if, instead of passing it to persistStore, I passed it to the topmost persistReducer call:

const persistConfig = {
  key: 'root',
  storage: FilesystemStorage
}
const persistedReducer = persistReducer(persistConfig, rootReducer)

Also related to this, the documentation says, in the "usage with custom options" section, that you can call .config on the FSS object, and pass the result to storage:

persistStore(
  store,
  {
    storage: FilesystemStorage.config(
      {
        storagePath: `${RNFetchBlob.fs.dirs.DocumentDir}/persistStore`,
      },
    },
  )
)

Actually, the config method doesn't return anything (https://github.com/robwalkerco/redux-persist-filesystem-storage/blob/master/index.js#L17), so you can just call it as soon as you load the module, and then pass the object later on to persistReducer:

FilesystemStorage.config({
     storagePath: `${RNFetchBlob.fs.dirs.DocumentDir}/persistStore`
});
const persistConfig = {
  key: 'root',
  storage: FilesystemStorage
}
const persistedReducer = persistReducer(persistConfig, rootReducer)

Error: Database or disk is full (code13 SQLLIT_FULL)

Hello, thanks for your nice lib! I am using the lib as the following:


import {offline} from '../../components/redux-offline';
import offlineConfig from '../../components/redux-offline/lib/defaults';
import {applyMiddleware, compose, createStore} from 'redux';
import {persistReducer, persistStore} from 'redux-persist';
import thunkMiddleware from 'redux-thunk';
import reducers from '../reducers';
import FilesystemStorage from 'redux-persist-filesystem-storage';

const enhancers = [
  applyMiddleware(
    thunkMiddleware,
  ),
];

/* eslint-disable no-undef */
const composeEnhancers =
  (__DEV__ &&
    typeof window !== 'undefined' &&
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) ||
  compose;
/* eslint-enable no-undef */

const enhancer = composeEnhancers(...enhancers, offline({...offlineConfig}));

const persistConfig = {
  key: 'root',
  storage: FilesystemStorage,
  blacklist: [],
};

const persistedReducer = persistReducer(persistConfig, reducers);
export const store = createStore(persistedReducer, {}, compose(enhancer));
export const persistor = persistStore(store);

And after sometimes that I close and open the app, I get the following error:

Error: Database or disk is full (code13 SQLLIT_FULL)

4.2.1 wasn't released

Hi, a GitHub release was recently created for 4.2.1. However, the associated package.json bump wasn't created, so it wasn't released. Please consider bumping the package.json to 4.2.1 and retry the release :)

Performance

We had some users complaining about performance loss after upgrading the app, I believe this lib might be related to it because that was one of the changes.

Has anyone made a comparison with AsyncStorage impact in the app?

Still having Issue 199 : store is wiped out, all data lost

Hi
Thanks for the file-based redux-persist.
I'm the guy who filed Issue 199 (rt2zz/redux-persist#199) and unfortunately, I'm still having the same issue I had with the basic redux-persist: database wiped out whenever the data gets big. I have two alpha testers that never had this issue because their data is much smaller. Unfortunately files don't solve the problem. I may file another issue on redux-persist.
Best

After closing the application, the data is not saved

Android version: 12
"react-native": "0.66.3"
"redux-persist-filesystem-storage": "^4.1.0"
"react-native-blob-util": "^0.16.0"

While working with the application - everything is fine, the data is saved. I close the application - the data is cleared

Does not work on RN 0.60

As per #35 (comment).

rn-fetch-blob introduced a breaking change in the release 0.10.16, providing support for RN 0.60 and above. This library pinned to 0.10.15 so that compatibility for RN 0.59 and below was maintained.

Unfortunately, users of RN 0.60 that install this version receive the following error when installing pods:

[!] CocoaPods could not find compatible versions for pod "React/Core":
  In Podfile:
    rn-fetch-blob (from `../node_modules/rn-fetch-blob`) was resolved to 0.10.6, which depends on
      React/Core

The solution is probably to bump this lib to 2.x and depend on 0.10.16 of rn-fetch-blob. This would allow RN 0.59 and below users to use 1.x and RN 0.60+ users to use 2.x.

Cannot migrate from AsyncStorage to FS

I am trying to switch from the standard AsyncStorage adaptor to this FS implementation due to Android filesize limitations.

On iOS when I try to use the suggested method for persisted state migration outlined here I am getting the following error:

Error: No such file '/Users/ben/Library/Developer/CoreSimulator/Devices/2EA11A5D-A311-4BAB-8AB9-944D5E83791D/data/Containers/Data/Application/B2729C15-11F0-4704-B0BA-3592EA76E4B6/Documents/persistStore/persist-root'

This sounds like it's related to #22. Could someone confirm?
Also, is there a fix/workaround yet?

TypeError: this._nativeModule.addListener is not a function

Hey thanks for this library.
I am getting following error while running react native app in IOS (Xcode v14.3.1, React Native 0.63.2):

**TypeError: this._nativeModule.addListener is not a function. (In 'this._nativeModule.addListener(eventType)', 'this._nativeModule.addListener' is undefined)

ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)**

Does not work on RN < 0.60

The rn-fetch-blob package recently release a new version 0.10.16 which includes support for RN 0.60. But [email protected] is no compatible with previous RN versions (See issue.

This in turn breaks this package for RN versions < 0.60.

Until the rn-fetch-blob issue is fixed, this package should depend on [email protected] as suggested here.

getting console.error error purging data stored stored state

hey before I was using asyncStorage then my IOS is working well but android i get size error
then I want to use this redux-persist-filesystem-storage still my IOS is working fine but android
I am getting this error

screenshot_1541972477

my code

import immutablePersistenceTransform from '../Services/ImmutablePersistenceTransform';
//import { AsyncStorage } from 'react-native';
import FilesystemStorage from 'redux-persist-filesystem-storage'
const REDUX_PERSIST = {
  active: true,
  reducerVersion: '1.0',
  storeConfig: {
    key: 'primary',
    storage: FilesystemStorage,
    blacklist: ['appState', 'search'], // reducer keys that you do NOT want stored to persistence here
    // whitelist: [], Optionally, just specify the keys you DO want stored to
    // persistence. An empty array means 'don't store any reducers' -> infinitered/ignite#409
    transforms: [immutablePersistenceTransform],
  },
};

export default REDUX_PERSIST;

`

Problem on fresh install

Hi, my app is on the following redux deps:

    "redux-persist": "^4.10.2",
    "redux-persist-filesystem-storage": "1.3.1",
    "redux-saga": "^0.16.0",

After upgrading redux-persist-filesystem-storage to 1.4.0, my app won't start properly on a fresh install. I don't know what is happening, but I expect that my startup saga is stuck waiting for persist/REHYDRATE.
It is/was hard to debug, but it is reproducible by installing the app, enabling debug mode and installing another version with the updated dep over it.

I think I once saw an error containing storage.getAllKeys but I am not sure.

I have no other clues. Thank you for this great lib so far!

Error in callNativeModules() malformed calls from JS: field sizes are different

captura de pantalla 2018-04-25 a las 16 58 19

Almost went bananas today, trying to find out what was causing this error. Apparently this field sizes are different is the "human friendly" way of RN of telling you that parameters passed to the native code from javascript don't match.

After debugging pretty much the whole storage, I found that this module contains a copy of react-native-fetch-blob under node_modules of the library, which was colliding with the version I'm using in my own app. After deleting this one, everything started working like a charm.

I'm opening this issue as a future reference for anyone hitting the same stone and just in case you have a tip on how to better handle this scenario.

Thank you very much, cheers
Miguel

Possible that rn-fetch-blob will go unmaintained

According to this issue, rn-fetch-blob may go unmaintained.

Is this something we should worry about? If so, how can we help to ensure this project doesn't suffer? How can we (or I) help?

Feel free to close this if you are aware or already have a plan.

Cheers.

Directory creation on redux persist v5

On first run the file is created when user calls getAllKey.
https://github.com/robwalkerco/redux-persist-filesystem-storage/blob/master/index.js#L63-L66

With redux persist v5, getAllKeys may not be called, for example when calling getstoredstate.
This means that the directory must be created before.
https://github.com/rt2zz/redux-persist/blob/master/src/getStoredState.js#L7-L38

We could add the test on getItem but that would introduce unneccessary overhead.
A solution could be to make the config method async and create the directory here. Also we could use that change to request the proper android permissions and fallback in case it failed.

We wrapped all that but if you interested I could make a PR.

check if there is something

Error: No such file '/data/user/0/com.spector/files/persistStore/allTicket'; /data/user/0/com.spector/files/persistStore/allTicket (No such file or directory)

Can I check if there is something or created directory, then take request => FilesystemStorage.getItem('allTicket') ?
Is there such a check, if there is, can help me please

unsafe implementation of the HostnameVerifier interface - Google play store warning

Came across

unsafe implementation of the HostnameVerifier interface

warning given by google play.

It seem to be a problem caused by HostnameVerifier on this line of code of rn-fetch-blob(dir: rn-fetch-blob > android > src > main > java > com > RNFetchBlob > RnFetchBlobUtils.java):

            OkHttpClient.Builder builder = client.newBuilder();
            builder.sslSocketFactory(sslSocketFactory, x509TrustManager);
            builder.hostnameVerifier(new HostnameVerifier() {
                @Override
                public boolean verify(String hostname, SSLSession session) {
                    return true;
                }
            });

on this article (https://www.programmersought.com/article/41342996449/), it proposed to handle it like so. But on our case we dont really have any handling of HTTPS need to be done hence will just modify this block to return false.

My question is will it affect the functionality of this library?

Changelog?

Is there any changelog or tag/release section? It would be good to read about what has changed in a release.

Repo status and rn-fetch-blob

Hello!

I'm working on a react native app using redux and I'm vetting out storage solutions for storing up to 300Mb on device. I'm curious about this repo's status considering rn-fetch-blob has a large Unmaintained label on the repo right now.

The issue I'm referencing.

Are there plans to continue supporting this given the status of rn-fetch-blob?

Thanks! ๐Ÿ‘

How to configure with redux-offline

Hello, I need to persist medium amount of data locally on the phone with redux so I found this package, however I don't understand how to set it up together with redux-offline. My setup is:

let rehydrated = false;

export const getHydrationState = () => rehydrated;

const setHydratedState = () => store.dispatch(setHydrated());

const store = createStore(
  rootReducer,
  compose(
    offline({
      ...offlineConfig,
      persistOptions: {
        blacklist: ['hydration'],
      },
      persistCallback: () => {
        setLanguage();
        setHydratedState();
      },
      retry: () => 300000, // retry  every 5 minutes
    }),
    applyMiddleware(thunk),
  ),
);

export default store;

Does anyone has an idea how to set it up?
Thanks!

Data sporadically erased (React Native)

Introduction

We are building a React Native app, and we are using redux-persist together with redux-persist-filesystem-storage to store data on the phone.

The issue

We are experiencing that sometimes after an app update (via TestFlight and Play Store) all the app data just is erased. The app is simply back to initial state. This can happen for both iOS and Android.

Steps to reproduce

Well, this is where it get's annoying.. We haven't yet been able to get the exact steps to reproduce the issue. It just happens sporadically. We have around 100 beta testers, and ~20 people have reported this issue. Both on iOS and Android, and there was no link between a specific app update version or anything.

Similar issues

We have of course looked around on GitHub, trying to find similar issues. At first we thought rt2zz/redux-persist#199 was our issue, so that's why we switched to redux-persist-filesystem-storage from AsyncStorage. But that didn't help. And it looks like other people are still experiencing it as well: #2

Additional information

Final note

Although this issue is somewhat vaguely described, I'm submitting it to raise awareness, because we think it's a rather important issue if it really IS an existing bug. Maybe someone out there is looking for help with the same issue - so here it is.

App freezes and closes when i save more than 15mb to storage

When I save in storage more than 15mb , my app freezes and after few second closes. I checked it, when i try to save 13mb it's ok.
Any solutions ?
I use filesystem-storage by changing from import storage 'redux-persist/lib/storage';
to import FilesystemStorage from 'redux-persist-filesystem-storage' .
And add to whitelist reducers that i need to store.
Am I right? And how can i save large sizes in storage(more than 15mb)
ANDROID, on iOS it's good

code:

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import { composeWithDevTools } from 'redux-devtools-extension';
import getRootReducer from '@reducers';
import { Platform } from 'react-native';
import FilesystemStorage from 'redux-persist-filesystem-storage'


const persistConfig = {
  key: 'root',
  whitelist: ['pins' ],
  storage: FilesystemStorage,
};

const persistedReducer = persistReducer(persistConfig, getRootReducer());

export default () => {
  const store = createStore(
    persistedReducer,
    composeWithDevTools(applyMiddleware(thunk))
  );
  const persistor = persistStore(store);
  return { store, persistor };
};

As you can see I try to save pins that more than 15mb to storage...

How migrate from asyncStorage to RPFS using Redux Persist v5?

Hi,
I'm having this issue of loosing data after a while, probably the data are to heavy to manage for AsyncStorage on Android. I'd like to give it a try to this solution without loosing all the data that could be already savec through AsyncStorage.
What are your recomandations to do so?

Flow issue with setItem

node_modules/redux-persist-filesystem-storage/index.js:33
 33:       .catch(error => callback(error && error)),
                           ^^^^^^^^^^^^^^^^^^^^^^^^ function call. Function cannot be called on possibly undefined value

Looks like it just needs a simple existence check.
Got this error on flow 0.53.1.

Crash regarding rn-fetch-blob

crash

Hi,
Faced this issue after replaced AsyncStorage from '@react-native-community/async-storage' with FilesystemStorage from 'redux-persist-filesystem-storage'

Found that adding custom dependency to rn-fetch-blob v0.12.0 into project fixes the issue.
Currently redux-persist-filesystem-storage uses rn-fetch-blob v0.10.16
Suppose library dependency upgrade will fix this without need to add separate rn-fetch-blob dependency.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.