如何解决:console.error:“redux-persist 无法创建同步存储。回退到“noop”存储
我正在尝试在 React Native 应用中设置 redux-persist。
但是我遇到了这个错误:
console.error: "redux-persist failed to create sync storage. falling back to "noop" storage
我试图在“src/redux/index.js”中将存储从 storage 更改为 AsyncStorage,但仍然遇到相同的错误:
import AsyncStorage from '@react-native-community/async-storage';
const config = {
key: "root",
storage: AsyncStorage // Attempted to fix it (but failed)
// storage // old code
};
这是其他代码:
在 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>
);
}
}
在 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();
在 /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,
}
在 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)
);
更新:
根据 mychar 的建议成功解决错误: github.com/rt2zz/redux-persist/issues/1080 :
-
npm install --save @react-native-community/async-storage
-
在 iOS 上,记得在 iOS 文件夹中执行“pod install”
-
将存储更改为 AsyncStorage
旧代码 => import storage from 'redux-persist/lib/storage'; new code => import AsyncStorage from '@react-native-community/async-storage';
旧代码 => const persistConfig = { //... storage,
新代码 => const persistConfig = { //... storage: AsyncStorage, >
但是,仍然收到此警告:
在 redux-persist v6 中,您尝试进行如下更改:
旧配置 V5 =>
import storage from 'redux-persist/lib/storage';
const persistConfig = {
//...
storage,
}
新配置 v6 =>
首先添加:
yarn add @react-native-async-storage/async-storage
import AsyncStorage from '@react-native-async-storage/async-storage';
const persistConfig = {
//...
storage: AsyncStorage,
}
即使我用 AsyncStorage 替换了存储,我仍然遇到同样的问题。
我通过删除原始存储的导入行解决了该问题
import storage from "redux-persist/es/storage"; //remove this
在
redux-persist
v6.0.0 之前,您使用如下存储:
import storage from 'redux-persist/lib/storage';
后台使用的是
react-native
核心中的
AsyncStorage
。
由于
react-native
已弃用
AsyncStorage
并将其从
react-native
核心中删除,因此新版本的
redux-persist
已停止使用它,这似乎是个不错的决定。
您现在可以执行相同操作,但要从
社区版本
导入
AsyncStorage
。
import AsyncStorage from '@react-native-community/async-storage';
并且然后在配置中使用:
const persistConfig = {
storage: AsyncStorage,
//other configurations
};
降级到
redux-persist
v5 不是一个稳定的解决方案
,因为它使用了来自核心
react-native
的 AsyncStorage,并且
react-native
将在即将推出的版本中将其完全删除
。
此外,我在评论中看到您不喜欢
AsyncStorage
,正如我所解释的那样,
redux-persist
一直将其用作存储,所以现在唯一的区别是您应该从社区版本获取它,而不是从
react-native
核心获取它