Redux-persist сразу же вылетает

Я пытаюсь добавить постоянство в управление состоянием Redux, которое у меня уже есть в моем приложении React Native, следуя совету @Filipe Borges здесь (сокращение + реакция-восстановление + сокращение-сохранение). Я просто хочу, чтобы элементы списка, которые создают пользователи (и которые я храню в Redux), были доступны после перезапуска приложения.

Я добавил необходимый код в соответствии с redux-persist github README, но когда я пытаюсь запустить свое приложение, оно либо немедленно падает (после нескольких секунд пустого белого экрана), либо выдает мне загадочное сообщение об ошибке/трассировку стека, говорящее мне, что "Не удается добавить дочерний элемент, который не имеет YogaNode для родителя без функции измерения» с трассировкой стека, состоящей только из кода библиотеки/ядра React Native (это означает, что я действительно не знаю, где искать).

Просто чтобы уточнить, redux и react-redux отлично работали до добавления redux-persist.

Вот как выглядит мой 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.

Заранее спасибо за помощь!


person Axel Kennedal    schedule 19.01.2018    source источник


Ответы (1)


Это вызывает из-за того, что компонент "loading..." без обтекания ‹ View > и ‹ Text >, попробуйте добавить обтекание или создайте загрузочный компонент, и проблема будет решена.

<PersistGate loading={<View><Text>Loading...</Text></View>} persistor={persistor}>
      <Navigator />
</PersistGate>
person Eduardo Ramos    schedule 19.01.2018