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

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