How to solve: console.error: "redux-persist failed to create sync storage. falling back to "noop" storage

Question

I'm trying to setup redux-persist in a react native app.

However I'm hitting this error:

console.error: "redux-persist failed to create sync storage. falling back to "noop" storage

I've tried to change the storage from storage to AsyncStorage in "src/redux/index.js", but it's still hitting the same error:

import AsyncStorage from '@react-native-community/async-storage';

const config = {
  key: "root",
  storage: AsyncStorage // Attempted to fix it (but failed)
  // storage // old code
};

Here's the other codes:

In App.js:

import React, { Component } from "react";
import { Provider } from "react-redux";
import { persistStore } from "redux-persist";
import { PersistGate } from "redux-persist/es/integration/react";
import store from "@store/configureStore";
import Router from "./src/Router";

export default class ReduxWrapper extends Component {
  render() {
    const persistor = persistStore(store);
    return (
      <Provider store={store}>
        <PersistGate persistor={persistor}>
          <Router />
        </PersistGate>
      </Provider>
    );
  }
}

In configureStore.js:

import { applyMiddleware, compose, createStore } from "redux";
import thunk from "redux-thunk";
import reducers from "@redux";

const middleware = [
  thunk,
  // more middleware
];

const configureStore = () => {
  let store = null;
  store = compose(applyMiddleware(...middleware))(createStore)(reducers);
  return store;
};

export default configureStore();

In /src/redux/index.js

import { persistCombineReducers } from "redux-persist";
import storage from "redux-persist/es/storage";

import { reducer as NetInfoReducer } from "./NetInfoRedux";
import { reducer as UserRedux } from "./UserRedux";

const config = {
  key: "root",
  storage,
};

export default persistCombineReducers(config, {
  netInfo: NetInfoReducer,
  user: UserRedux,
}

In Router.js

import React from "react";
import NetInfo from "@react-native-community/netinfo/lib/commonjs";
import { Config, AppConfig, Device, Styles, Theme, withTheme } from "@common";
import { AppIntro } from "@components";
import { connect } from "react-redux";

class Router extends React.PureComponent {
  constructor(props){
    super(props)
    this.state = {
      loading: true,
    };
  }

  componentWillMount() {
    NetInfo.getConnectionInfo().then((connectionInfo) => {
      this.props.updateConnectionStatus(connectionInfo.type != "none");
      this.setState({ loading: false });
    });
  }

  render() {
    return <AppIntro />;
  }
}

export default withTheme(
    connect(
    //   mapStateToProps,
    //   mapDispatchToProps
    )(Router)
);

Update:

Managed to solve the error base on mychar suggestion: github.com/rt2zz/redux-persist/issues/1080:

1. npm install --save @react-native-community/async-storage

2. on iOS, remember to perform "pod install" in iOS folder

3. Change storage to AsyncStorage

   old code => import storage from 'redux-persist/lib/storage'; new code => import AsyncStorage from '@react-native-community/async-storage';

   old code => const persistConfig = { //... storage, }

   new code => const persistConfig = { //... storage: AsyncStorage, }

However, still getting this warning:

Answer 1

In redux-persist v6, you try changing as follows:

Old config V5 =>

import storage from 'redux-persist/lib/storage';
const persistConfig = {
   //...
   storage,
}

New config v6 =>

First add: yarn add @react-native-async-storage/async-storage

import AsyncStorage from '@react-native-async-storage/async-storage';
const persistConfig = {
  //...
  storage: AsyncStorage,
}

Answer 2

I faced the same issue, even though I replaced storage with AsyncStorage.

I solved the issue by removing the import line of the original storage

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

Answer 3

Before redux-persist v6.0.0 you were using storage like this:

import storage from 'redux-persist/lib/storage';

What this uses in background is AsyncStorage that was in react-native core.

Since react-native has deprecated AsyncStorage and will remove it from react-native core then the new version of redux-persist has stopped using it and it seems a good decision.

You can do the same now but instead import AsyncStorage from community version.

import AsyncStorage from '@react-native-community/async-storage';

And then use in in your config:

const persistConfig = {
  storage: AsyncStorage,
  //other configurations
};

Downgrading to redux-persist v5 is not a stable solution since it uses AsyncStorage from core react-native and react-native will remove it completely in the upcoming versions.

Also I read in comments that you don't like AsyncStorage, well as I explained redux-persist has been using it as a storage so the only difference now is that you should get it from community version and not from react-native core

Answer 4

First of all import AsyncStorage using below line

import AsyncStorage from '@react-native-community/async-storage';

Secondly the persistConfig should be assigned AsyncStorage like below and if you supplied storage object then comment it out

const persistConfig = {
    // storage,
    storage: AsyncStorage,  
}

Lastly the below line importing storage or any other storage should not exist in your file

// import storage from 'redux-persist/lib/storage'  COMMENT THIS OUT

This is how I solved mine problem.

Answer 5

For Expo SDK version >=33 Workflow, the plugin @react-native-community/async-storage doesn't work.

It worked for me.

import { AsyncStorage } from 'react-native';`  
.  
.   
.  
const persistConfig = {
  key: 'root',
  storage: AsyncStorage
}

reference: https://docs.expo.io/versions/latest/react-native/asyncstorage/

Answer 6

I solve it by removing :

import storage from 'redux-persist/lib/storage'

and replacing it with:

import { AsyncStorage } from 'react-native'

Don't forget this :

const rootPersistConfig = {  
    key: 'root',
    storage: AsyncStorage
}

Answer 7

My error was solved by downgrading redux-persis version to "5.10.0".

Answer 8

Comment out / exclude this line from your imports import storage from 'redux-persist/lib/storage'

ensure that only async storage is imported

import AsyncStorage from '@react-native-community/async-storage';

Answer 9

comment out //import storage from "redux-persist/lib/storage";

and import from import AsyncStorage from '@react-native-community/async-storage';

Answer 10

Downgrade redux-persist to 5.10.0