How to solve: console.error: "redux-persist failed to create sync storage. falling back to "noop" storage
JavascriptReact NativeRedux PersistJavascript Problem Overview
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:
-
npm install --save @react-native-community/async-storage
-
on iOS, remember to perform "pod install" in iOS folder
-
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:
Javascript Solutions
Solution 1 - Javascript
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,
}
Solution 2 - Javascript
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
Solution 3 - Javascript
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
Solution 4 - Javascript
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/
Solution 5 - Javascript
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.
Solution 6 - Javascript
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
}
Solution 7 - Javascript
My error was solved by downgrading redux-persis version to "5.10.0".
Solution 8 - Javascript
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';
Solution 9 - Javascript
Downgrade redux-persist
to 5.10.0