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

1 Answer 1

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.