Question

react-redux中的PersistGate不会等待商店补水。

我有两个导航器：AppNavigator和BottomBarNavigator，第一个用于身份验证流程，第二个用于用户身份验证时。

这些导航器位于createSwitchNavigator内，我希望根据我存储在商店/ auth中的loggedIn变量来选择合适的导航器。

Router.js

const MyNavigator = (!loggedIn) ? createSwitchNavigator({
    AppNavigator: AppNavigator,
    BottomBarNavigator: BottomBarNavigator,
}) : createSwitchNavigator({
    BottomBarNavigator: BottomBarNavigator,
    AppNavigator: AppNavigator,
});

我将我的store/auth变量保留在redux-persist内部。

Store.js

import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

const persistConfig = {
    key: 'root',
    storage: storage,
    whitelist: ['auth']
};

const pReducer = persistReducer(persistConfig, reducers);

export const store = createStore(pReducer, undefined, applyMiddleware(ReduxThunk, logger));
export const persistor = persistStore(store);

在App.js中，我用PersistGate包裹了导航器，但是尽管状态在几毫秒后会重新水化，但导航器是在渲染之前绘制的，因此总是选择AppNavigator。

App.js

import { PersistGate } from 'redux-persist/es/integration/react'

    render(){
        return (
            <Provider store={store}>
                <PersistGate 
                    loading={null} 
                    onBeforeLift={this.onBeforeLift}
                    persistor={persistor}>

                    <MyNavigator ref={navigatorRef => {NavigationService.setTopLevelNavigator(navigatorRef);}}/>

                </PersistGate>
            </Provider>

是否有任何使其正常工作的建议？

Redux-Perist中的PersistGate无需等待商店重新水化

0 个答案: