Expo React Native App + Redux-Persist：AsyncStorage 问题答案

【问题标题】：Expo React Native App + Redux-Persist: AsyncStorage ProblemExpo React Native App + Redux-Persist：AsyncStorage 问题
【发布时间】：2020-02-23 17:45:31
【问题描述】：

我刚刚使用redux-persist@6.0.0 开始了一个新的 Managed Expo React Native 项目（Expo SDK 35，React Native 0.5.9），但是甚至一个新的带有 redux/redux-persist 的 expo 项目目前也在抛出以下错误。

使用来自react-native的AsyncStorage，

我们得到错误：

redux-persist: config.storage 是必需的。尝试使用提供的存储引擎之一import storage from 'redux-persist/lib/storage'

使用来自@react-native-community/async-storage的AsyncStorage，

我们得到错误：

[@RNC/AsyncStorage]: NativeModule: AsyncStorage 为空。

使用来自redux-persist/lib/storage的storage，

我们得到错误：

console.error:“redux-persist 未能创建同步存储。回退到 noop 存储。”

问题：我们如何在不弹出的情况下解决这个问题？谢谢！

redux-persist代码

注意：之前的尝试已被注释掉：

// Chose 1 of the 3 storages
// import { AsyncStorage } from "react-native";
// import AsyncStorage from '@react-native-community/async-storage';
import storage from 'redux-persist/lib/storage'

import { createMigrate, persistStore, persistReducer } from "redux-persist";
import reducer from "../reducers";

const persistConfig = {
    key: 'root',
    version: 0,
    storage,    // 'redux-persist/lib/storage'
}

// const persistConfig = {
//   key: 'root',
//   version: 0,
//   AsyncStorage,    // '@react-native-community/async-storage'
// }

const persistedReducer = persistReducer(persistConfig, reducer);

【问题讨论】：

您能告诉我们您是如何使用@react-native-community/async-storage 声明您的persistConfig 的吗？
@Neeko 我已更新问题（已注释掉）以回答您的问题。谢谢！
您是在两个设备上还是在 iOS 上都遇到此问题？
@Neeko iOS。目前没有可用于测试的安卓设备。

标签： reactjs react-native expo asyncstorage redux-persist

【解决方案1】：

此导入适用于 Web 应用：

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

对于 React Native，您应该使用以下导入：

import AsyncStorage from '@react-native-community/async-storage';
import { createMigrate, persistStore, persistReducer } from "redux-persist";
import reducer from "../reducers";

const persistConfig = {
    key: 'root',
    version: 0,
    //...
    storage: AsyncStorage
}

const persistedReducer = persistReducer(persistConfig, reducer);

【讨论】：

感谢托洛特拉！我确实尝试了您的方法（对问题进行了评论）但遇到了错误[@RNC/AsyncStorage]: NativeModule: AsyncStorage is null. 也许是因为我使用的是使用 React Native 0.5.9 而不是 0.6 的 Expo SDK 35？
可以，尝试使用expo import for AsyncStorage import { AsyncStorage } from 'react-native';
我已经尝试过这种方法，遇到错误redux-persist: config.storage is required. Try using one of the provided storage engines import storage from 'redux-persist/lib/storage'.更新问题以反映这一点。

【解决方案2】：

对于 React Native 下面的代码不起作用。

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

const persistConfig = {
    key: 'root',
    AsyncStorage
}

因为persistConfig 需要一个密钥storage

低于persistConfig 适用于 React Native。

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

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

【讨论】：

【解决方案3】：

可能是库链接问题。

确保你跑了 react-native link @react-native-community/async-storage

我还建议转到您的 ios 文件夹并运行 pod install。

如果您不使用 Cocoapods，请查看 here 进行手动链接。

【讨论】：

谢谢！希望有一个解决方案，而不必弹出 Expo 应用程序（链接库所必需的）

【解决方案4】：

纱线添加@react-native-async-storage/async-storage
从 '@react-native-async-storage/async-storage' 导入 AsyncStorage；常量 authPersistConfig = { 关键：'身份验证'， stateReconciler: autoMergeLevel2, 存储：异步存储，白名单：['isAuthenticated', 'sessionToken', 'userId'], };

为我工作

【讨论】：

【解决方案5】：

一个简单的无意错字，例如

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

最终会是

config.storage is required

或

redux-persist failed to create sync storage. falling back to noop storage.

【讨论】：

你是怎么解决这个问题的？
只需删除 { }