如何解决：console.error：“ redux-persist无法创建同步存储。回退到” noop“存储

Question

我正在尝试在React Native应用程序中设置redux-persist。

但是我遇到了这个错误：

console.error：“ redux-persist无法创建同步存储。回退到” noop“存储

我尝试将“ src / redux / index.js”中的存储从存储更改为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：

1）npm install-保存@ react-native-community / async-storage

2）在iOS上，请记住在iOS文件夹中执行“ pod安装”

3）将存储更改为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,
}

但是，仍然收到此警告：

Answer 1

我遇到了同样的问题，即使我用 AsyncStorage 替换了存储。

我通过删除原始存储的导入行解决了这个问题

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

Answer 2

在redux-persist v6中，您尝试进行如下更改：

旧配置V5 =>

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

新配置v6 =>

首先添加： yarn add @react-native-community/async-storage

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

Answer 3

对于Expo SDK 版本 >=33 工作流程，该插件 @react-native-community/async-storage不起作用。

它对我有用。

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

参考：https : //docs.expo.io/versions/latest/react-native/asyncstorage/

Answer 4

我通过删除来解决它：

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

并将其替换为：

import { AsyncStorage } from 'react-native'

不要忘记这一点：

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

Answer 5

在redux-persistv6.0.0 之前，您使用的存储方式如下：

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

这是什么用途的背景是AsyncStorage，这是在react-native核心。

由于react-native已弃用AsyncStorage并将其从react-native核心中删除，因此的新版本redux-persist已停止使用它，这似乎是一个不错的决定。

您现在可以执行相同的操作，但是可以AsyncStorage从社区版本导入。

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

然后在您的配置中使用：

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

降级到redux-persistV5并不是一个稳定的解决方案，因为它从核心采用AsyncStorage react-native和react-native 将彻底删除它在即将到来的版本。

我也读了一些您不喜欢的评论，AsyncStorage正如我所解释的那样，redux-persist一直在使用它作为存储，所以现在唯一的区别是您应该从社区版本而不是react-native核心版本获得它。

Answer 6

首先使用以下行导入 AsyncStorage

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

其次，应该为persistConfig 分配AsyncStorage，如下所示，如果您提供了存储对象，则将其注释掉

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

最后，您的文件中不应存在导入存储或任何其他存储的以下行

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

这就是我解决我的问题的方法。

Answer 7

通过将 redux-persis 版本降级到“5.10.0”解决了我的错误。