1

我正在尝试将持久性添加到我已经在我的 React Native 应用程序中工作的 Redux 状态管理中,遵循@Filipe Borges 的建议 redux + react-redux + redux-persist)。我想要的只是用户创建的列表项(以及我存储在 Redux 中的)应该在应用程序重新启动后可用。

我根据redux-persist github README添加了似乎是必需的代码,但是当我尝试启动我的应用程序时,它要么立即崩溃(在空白屏幕几秒钟后),要么给我一个神秘的错误消息/堆栈跟踪告诉我“无法将没有 YogaNode 的子级添加到没有测量功能的父级”,堆栈跟踪仅包含库/核心 React Native 代码(意思是我真的不知道在哪里看)。

澄清一下,在添加 redux-persist 之前,redux 和 react-redux 工作得非常好。

这是我的store.js样子:

import { createStore, applyMiddleware } from "redux";
import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";
import logger from "redux-logger";

import reducers from "./reducers";

// configure middleware
let middleware = [];
if (process.env.NODE_ENV === "development") {
    middleware.push(logger);
}

// configure persistance
const persistConfig = {
    key: "root",
    storage: storage,
};
const persistedReducers = persistReducer(persistConfig, reducers);

export default function configureStore() {

    // finalize store setup
    let store = createStore(persistedReducers, applyMiddleware(...middleware));
    let persistor = persistStore(store);
    return { store, persistor };
}

我的App.js

import React, { Component } from 'react';
import Expo from "expo";

import Navigator from "./app/config/routes";

// store and state management
import { Provider } from "react-redux";
import configureStore from "./app/redux/store";
let { store, persistor } = configureStore();
import { PersistGate } from "redux-persist/lib/integration/react";

export default class App extends Component {
constructor() {
    super();
    Expo.ScreenOrientation.allow(Expo.ScreenOrientation.Orientation.PORTRAIT_UP);
}

render() {
        return (
            <Provider store={store}>
                <PersistGate loading="loading..." persistor={persistor}>
                    <Navigator />
                </PersistGate>
            </Provider>
        );
    }
}

关于我的环境的注释;我的应用程序是一个独立的 Expo 应用程序,具有:

"dependencies": {
    "expo": "^24.0.0",
    "react": "16.0.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-24.0.0.tar.gz",
    "react-navigation": "^1.0.0-beta.21",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-persist": "^5.4.0",
    ...etc, some more unrelated packages
  }

在 Android 7 上运行,在 MacOS High Sierra 中开发。

预先感谢您的帮助!

4

1 回答 1

1

这是由于“正在加载...”组件没有<View><Text>的换行,尝试添加换行或创建加载组件,问题将得到解决。

<PersistGate loading={<View><Text>Loading...</Text></View>} persistor={persistor}>
      <Navigator />
</PersistGate>
于 2018-01-19T19:44:57.180 回答