Storage did not work on react-native project with error "redux-persist failed to create sync storage. falling back to memory storage."

[kevinleeTCA]

I was trying to hook up redux-persist on react-native project. The config of persistor is as follows:

...
import storage from "redux-persist/es/storage";
import { persistStore, persistReducer } from "redux-persist";
import immutableTransform from "redux-persist-transform-immutable";

const defaultPersistConfig = {
  key: "root",
  storage,
  transforms: [immutableTransform()]
};

const storeBuilder = () => {
  const reducer = persistReducer(defaultPersistConfig, rootReducer);
  let store = createStore(reducer);
  let persistor = persistStore(store);
  return { persistor, store };
};

export default storeBuilder;

In our App.js, we do the following:

import { PersistGate } from "redux-persist/es/integration/react";

const { persistor, store } = storeBuilder()

...
      <Provider store={store}>
        <PersistGate
          loading={<ActivityIndicator />}
          onBeforeLift={() => {}}
          persistor={persistor}
        >
          <App />
        </PersistGate>
      </Provider>

This config works well on web project, but When I load react-native project, I got error redux-persist failed to create sync storage. falling back to memory storage.

Basically, we can not use this import on react-native project, it will always show the above error.

on react-native project. We ended up found that import storage from "redux-persist/es/storage"; this is the places where we got the problem, then we have to use

const defaultPersistConfig = {
  key: "root",
  storage: AsyncStorage
  transforms: [immutableTransform()]
};

to config our mobile app, then it works.

However, based on the docs it says that import storage from 'redux-persist/es/storage' // default: localStorage if web, AsyncStorage if react-native then I guess we do not need to explicitly say storage: AsyncStorage, I also noticed that there is index.native.js which export the AsyncStorage, but it did not used anywhere. Did I miss something ?

[rt2zz]

my understanding is that react-native will import index.native.js over index.js when importing import storage from "redux-persist/es/storage". The pattern was taken from redux-offline, but there they do not use it for index.js so maybe that is the problem. Instead we could consider renaming it to src/defaults/storage.js which might solve the problem?

[kevinleeTCA]

@rt2zz thank you for your reply, I am not sure whether renaming will fix it or not.

I put my storeBuilder in a shared project, which is shared by both web and mobile, this might be the problem, if I put

import storage from "redux-persist/es/storage";

in the react-native project, it fixed the problem. So even our persistConfig is in the shared project, we have to provide storage separately in both react and react-native project, and merge the persistConfig with the default config, as follows:

shared project:

const defaultPersistConfig = {
  key: "root",
  transforms: [immutableTransform()]
};

const storeBuilder = (persistConfig: {
  storage: Object
}): AiloStoreBuilderReturnType => {
  const reducer = persistReducer(
    { ...defaultPersistConfig, ...persistConfig },
    rootReducer
  );
  let store = createStore(reducer);
  let persistor = persistStore(store);
  return { persistor, store };
};

both react and react-native have to do:

import storage from "redux-persist/es/storage";
...
const { persistor, store } = storeWithMockData({ storage });

then it will work.

Thank you for your help. :)

[programmer-RN]

Hi @kevinleeTCA , where I can find the storeWithMockData? I am new in redux persist and first time implement redux persist v5.

[jonauz]

Can some one help on how to disable this console trashing issue. Really huge impact on work focus. Keeps every time outputting lots of data into terminal with error "redux-persist failed to create sync storage. falling back to memory storage."

[ckOfor]

use version "redux-persist": "^5.10.0"