javascript - Loading Screen using PersistGate doesn't render - Stack Overflow

admin管理员组

文章数量:1399898

I'm using redux-persist and I'm trying to render a screen passing it to the loading prop of PersistGate.

I did some research and I found that I should dispatch REHYDRATE to the reducer but that doesn't work either.

Maybe I'm not configuring my reducers well? I would also like to be able to set the loading prop to null to avoid the flash screen before the App renders, but the result is the same as passing it a ponent to render.

This is my code of index.js

import App from './App';
import React from 'react';
import { Provider } from 'react-redux';
import { AppRegistry } from 'react-native';
import { PersistGate } from 'redux-persist/integration/react';
import { SplashScreen } from './src/screens/SplashScreen';
import configureStore from './src/store/configureStore';

const store = configureStore();
const persistor = configureStore();

const RNRedux = () => (
    <Provider store={store}>
        <PersistGate loading={<SplashScreen/>} persistor={persistor}>
            <App />
        </PersistGate>
    </Provider>
);

ponentDidMount = () => {
    this.persistor.dispatch({ type: REHYDRATE });
};

AppRegistry.registerComponent('Sharryapp', () => RNRedux);

I'm using redux-persist and I'm trying to render a screen passing it to the loading prop of PersistGate.

I did some research and I found that I should dispatch REHYDRATE to the reducer but that doesn't work either.

Maybe I'm not configuring my reducers well? I would also like to be able to set the loading prop to null to avoid the flash screen before the App renders, but the result is the same as passing it a ponent to render.

This is my code of index.js

import App from './App';
import React from 'react';
import { Provider } from 'react-redux';
import { AppRegistry } from 'react-native';
import { PersistGate } from 'redux-persist/integration/react';
import { SplashScreen } from './src/screens/SplashScreen';
import configureStore from './src/store/configureStore';

const store = configureStore();
const persistor = configureStore();

const RNRedux = () => (
    <Provider store={store}>
        <PersistGate loading={<SplashScreen/>} persistor={persistor}>
            <App />
        </PersistGate>
    </Provider>
);

ponentDidMount = () => {
    this.persistor.dispatch({ type: REHYDRATE });
};

AppRegistry.registerComponent('Sharryapp', () => RNRedux);

And that's my configureStore file:

import { createStore, bineReducers, applyMiddleware} from 'redux';
import ServerReducer from './reducers/ServerReducer';
import InviteReducer from './reducers/InviteReducer';
import { persistStore, persistReducer } from 'redux-persist';
import thunk from 'redux-thunk';
import storage from 'redux-persist/lib/storage';

const rootReducer = bineReducers({
    server: ServerReducer,
    invite: InviteReducer,
});

const persistConfig = {
    key: 'root',
    debug: true,
    storage, 
}

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = createStore(persistedReducer,applyMiddleware(thunk));

const persistor = persistStore(store);

export default configureStore = () => {
    return ( store, persistor );
};

• javascript
• react-native
• redux
• redux-persist

Share Improve this question Follow edited Mar 4, 2019 at 15:12 Matt Stobbs 63922 gold badges88 silver badges2222 bronze badges asked Aug 4, 2018 at 18:33 user9310845user9310845

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

I am not sure why you wrap your store and persistor in a configureStore function. Instead import both separately:

export const store = createStore(persistedReducer,applyMiddleware(thunk));
export const persistor = persistStore(store);

And import them in your desired file:

import {store, persistor} from './src/store/configureStore';

I have also noticed that your createStore call is false, since enhancers are passed as the third parameter. Change it to:

const store = createStore(persistedReducer, undefined, applyMiddleware(thunk));

That should do it.

Also you do not need to dispatch a rehydrate action as it happens automatically on app start.

本文标签： javascriptLoading Screen using PersistGate doesn39t renderStack Overflow