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 draperunner avatar fiznool avatar freddy03h avatar froelund avatar maxkomarychev avatar nico1510 avatar robwalkerco avatar rt2zz avatar timrobinson1 avatar yestay90 avatar

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.