热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

如何解决《如何解决:console.error:“redux-persist无法创建同步存储。回退到”noop“存储》经验,为你挑选了2个好方法。

我正在尝试在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 (
      
        
          
        
      
    );
  }
}

在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 ;
  }
}

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,
}

但是,仍然收到此警告:



1> rfdc..:

在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,
}


并且不要忘记在添加异步存储程序包后执行此操作:cd ios / && pod install

2> Edison Biba..:

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-nativereact-native 将彻底删除它在即将到来的版本。

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


推荐阅读
  • 本教程旨在指导开发者如何在Mac上设置React Native的开发环境,以进行iOS应用的开发。文中详细介绍了必要的软件安装步骤,包括Xcode、Homebrew、Node.js、Watchman以及React Native CLI等工具的安装方法。 ... [详细]
  • 本文详细探讨了Xshell6评估版到期后无法使用的常见问题,并提供了有效的解决方案,包括如何合法购买授权以继续使用。 ... [详细]
  • 如何使用Ionic3框架创建首个混合开发应用
    混合开发是指结合原生(Native)与网页(Web)技术进行移动应用开发的方法。本文将详细介绍如何利用Ionic3这一流行的混合开发框架,从环境搭建到创建并运行首个应用的全过程。 ... [详细]
  • 前言ReactNative是目前最流行的跨平台框架,并且是Facebook团队开源的项目。架构及实现技术上都有很高的研究价值,本系列就来分析一下Reac ... [详细]
  • 精选Unity开源项目:UniRx实现响应式编程
    本文介绍了Unity中的响应式编程框架——UniRx,探讨了其在解决异步编程难题中的应用及优势。 ... [详细]
  • 本文通过探讨React中Context的使用,解决了在多层级组件间传递状态的难题。我们将详细介绍Context的工作原理,并通过实际案例演示其在项目中的具体应用。 ... [详细]
  • Vue 项目构建与部署指南
    本文将指导您完成Vue项目的构建和部署过程,包括环境搭建、项目初始化及配置、以及最终的部署步骤。 ... [详细]
  • 本文探讨了使用React Native框架开发的应用,在通过AppCenter构建iOS版本时遇到的‘CopyPlistFile’命令失败的问题,并提供了详细的解决方案。 ... [详细]
  • 了解如何快速搭建属于自己的个人博客,无需编程基础,适合Mac和Windows用户。通过本文,您将学会使用GitHub Pages和Hexo构建一个完全自主的在线空间。 ... [详细]
  • Web前端开发中Webpack项目的实用技巧总结
    本文探讨了在使用Webpack构建前端项目时的一些实用技巧,包括如何高效地使用移动端UI框架Mint UI和MUI,以及如何优化项目性能和用户体验。 ... [详细]
  • 本文探讨了Vue项目在Internet Explorer浏览器中遇到的问题及解决方案,包括axios请求失效和页面在低版本浏览器中显示为空白的问题。 ... [详细]
  • 本文档介绍了在使用GitLab进行数据仓库项目开发时,如何管理和维护代码版本,包括非标准gitflow工作流下的分支结构及其权限设置,以及git commit message的规范。 ... [详细]
  • 最近在深入学习《数据结构与算法–JavaScript描述》一书,尝试通过npmjs.org寻找合适的库作为参考,但未能找到完全符合需求的资源。因此,决定自行实现一个字典数据结构,以便日后能够直接应用。 ... [详细]
  • 案例1:在子组件中两个按钮1和-1,点击后修改count整个操作的过程还是在子组件中完成,但是之后的展示交给父组件这样,我 ... [详细]
  • Node.js与npm安装及Vue项目搭建指南
    本文详细介绍了如何安装Node.js和npm,以及如何使用npm安装Vue及其相关工具,包括vue-router和vue-cli,并创建一个简单的Vue项目。 ... [详细]
author-avatar
2449978963潇潇
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有