CODEWITHSUNDEEP
react-nativereduxreact-reduxpersistenceredux-persist
Axel Kennedal
Axel Kennedal

Reputation: 555

Redux-persist crashing immediately

I'm attempting to add persistence to the Redux state management I already have working in my React Native app, following the advice of @Filipe Borges here (redux + react-redux + redux-persist). What I want is simply that list items that users create (and that I store in Redux) should be available after the app is restarted.

I've added what seemed to be the required code according to the redux-persist github README, but when I attempt to launch my app it either crashes immediately (after a few seconds of just a blank white screen), or gives me a cryptic error message/stacktrace telling me that "Cannot Add a child that doesn't have a YogaNode to a parent with out a measure function" with a stack trace consisting only of library/core React Native code (meaing I don't really know where to look).

Just to clarify, redux and react-redux worked perfectly fine before adding redux-persist.

Here is what my store.js looks like:

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

and my 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>
        );
    }
}

Notes about my environment; my app is a detached Expo app with:

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

Running on Android 7, developed in MacOS High Sierra.

Thank you in advance for the help!

Upvotes: 1

Views: 1636

Answers (1)

Eduardo Ramos
Eduardo Ramos

Reputation: 534

This is causing due the "loading..." component without a wrap of < View > and < Text >, try to add the wrap or create a loading component and the problem will be solve.

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

Upvotes: 1

Related Questions