我正在使用Redux存储和PersistGate
配置React Native应用程序。 Redux存储已配置并按预期工作,但是PersistGate
导致该应用即使在第一个屏幕也无法呈现。没有PersistGate
的应用程序可以正常显示。
这是App.js
代码:
import React, {Component} from 'react';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { persistStore, autoRehydrate } from 'redux-persist';
import { PersistGate } from 'redux-persist/integration/react';
import AppNavigator from './AppNavigator';
import SplashScreen from 'react-native-splash-screen';
import allReducers from './store/reducers/index';
const store = createStore(
allReducers,
applyMiddleware(thunk),
//compose(applyMiddleware(thunk), autoRehydrate()),
);
// This line makes store persistent.
const persistor = persistStore(store);
type Props = {};
export default class App extends Component<Props> {
componentDidMount() {
if (SplashScreen) {
SplashScreen.hide();
}
}
render() {
return (
<Provider store={ store }>
<PersistGate persistor={persistor}>
<AppNavigator />
</PersistGate>
</Provider>
);
}
}
Reducer索引文件:
import {combineReducers} from 'redux';
import userReducer from './UserReducer';
const allReducers= combineReducers({
user: userReducer,
});
export default allReducers;
如果我从
<PersistGate persistor={persistor}>
文件中删除App.js
标记,则该应用程序可以正常运行。但是,当我使用PersistGate
时,我只会看到白色屏幕而没有崩溃。我错过了什么导致此奇怪的输出?
最佳答案
您还需要调用persistReducer函数:
const persistConfig = {
key: 'root',
storage,
}
const persistedReducer = persistReducer(persistConfig, rootReducer)
let store = createStore(persistedReducer)
let persistor = persistStore(store)
他们的文档中的更多信息:https://github.com/rt2zz/redux-persist
关于javascript - PersistGate导致应用停止渲染,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/56801318/