Redux-persist 立即崩溃
Redux-persist crashing immediately
我正在尝试将持久性添加到我已经在我的 React Native 应用程序中工作的 Redux 状态管理,遵循@Filipe Borges (redux + react-redux + redux-persist)的建议.我想要的只是用户创建的列表项(以及我存储在 Redux 中的列表项)在应用程序重新启动后应该可用。
我已经根据 redux-persist github README 添加了似乎是必需的代码,但是 当我尝试启动我的应用程序时,它要么立即崩溃(仅几秒钟后空白屏幕),或者给我一个神秘的错误 message/stacktrace 告诉我 "Cannot Add a child that doesn't have a YogaNode to a parent with out a measure function" 的堆栈跟踪仅包含 library/core 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 中开发。
提前感谢您的帮助!
这是由于 "loading..." 组件没有 < View > 和 <文本>,尝试添加wrap或创建加载组件,问题将得到解决。
<PersistGate loading={<View><Text>Loading...</Text></View>} persistor={persistor}>
<Navigator />
</PersistGate>
我正在尝试将持久性添加到我已经在我的 React Native 应用程序中工作的 Redux 状态管理,遵循@Filipe Borges
我已经根据 redux-persist github README 添加了似乎是必需的代码,但是 当我尝试启动我的应用程序时,它要么立即崩溃(仅几秒钟后空白屏幕),或者给我一个神秘的错误 message/stacktrace 告诉我 "Cannot Add a child that doesn't have a YogaNode to a parent with out a measure function" 的堆栈跟踪仅包含 library/core 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 中开发。
提前感谢您的帮助!
这是由于 "loading..." 组件没有 < View > 和 <文本>,尝试添加wrap或创建加载组件,问题将得到解决。
<PersistGate loading={<View><Text>Loading...</Text></View>} persistor={persistor}>
<Navigator />
</PersistGate>