Question

我正在使用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时，我只会看到白色的屏幕而没有崩溃。

我错过了什么导致此奇怪的输出？

Answer 1

您还需要调用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

PersistGate导致应用停止渲染

1 个答案: