我正在使用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/

10-09 16:58