代码之家  ›  专栏  ›  技术社区  ›  Axel Kennedal

Redux持续立即崩溃

  •  1
  • Axel Kennedal  · 技术社区  · 7 年前

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

    根据 redux-persist github README 但是 当我尝试启动我的应用程序时,它要么立即崩溃(几秒钟后只是一个空白的白屏),要么给我一条神秘的错误消息/堆栈跟踪 告诉我“不能在没有度量函数的情况下将没有YogaNode的子级添加到父级”,堆栈跟踪只包含库/核心React本机代码(我真的不知道该去哪里查找)。

    只是为了澄清一下,在添加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>
            );
        }
    }
    

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

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

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

    提前感谢您的帮助!

    1 回复  |  直到 7 年前
        1
  •  1
  •   Eduardo Ramos    7 年前

    这是由于 “正在加载…” 没有包装的组件 <查看(>); <文本(>); ,尝试添加包裹或创建加载组件,问题将得到解决。

    <PersistGate loading={<View><Text>Loading...</Text></View>} persistor={persistor}>
          <Navigator />
    </PersistGate>