PersistGate 导致应用停止渲染

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;

如果我从 App.js 文件中删除 <PersistGate persistor={persistor}> 标签，应用程序可以正常运行。但是当我使用 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 导致应用停止渲染

PersistGate causes the app to stop rendering

javascript

reactjs

react-native

redux

redux-persist