rt2zz / redux-persist

persist and rehydrate a redux store
MIT License
12.94k stars 866 forks source link

White flashes and white screen of death after the app opening after adding redux-persist #1053

Open Luckygirlllll opened 5 years ago

Luckygirlllll commented 5 years ago

I'm getting white flashes and white screen of death after the app is second time after adding redux-persist. Version of "redux-persist" is "^5.10.0".

Here is my App.js file:

import { PersistGate } from 'redux-persist/integration/react'
import {store, persistor } from './redux/store'

export default class App extends React.Component {

renderLoading = ()=> {
    <View>
      <ActivityIndicator size="large"/>
    </View>  
  }

  render() {
    return( 
      <Provider store={store}>
        <PersistGate loading={this.renderLoading()} persistor={persistor}>
          <AppContainer/>
        </PersistGate>
      </Provider>
    )  
  }
}

Here is my ./redux/store file:

import { createStore, applyMiddleware } from 'redux'
import { AsyncStorage } from 'react-native'
import thunkMiddleware from 'redux-thunk'
import { persistStore, persistReducer } from "redux-persist"
import reducers from './index';

import bindAuthEvents from '../auth/redux/bindEvents';
import bindTrackingEvents from '../tracking/redux/bindEvents';

const persistConfig = {
    key: 'root',
    storage: AsyncStorage,
  }

const persistedReducer = persistReducer(persistConfig, reducers)

const createStoreWithMiddleware = applyMiddleware(thunkMiddleware)(createStore);

export const store = createStoreWithMiddleware(persistedReducer);

const dispatch = event => store.dispatch(event) 
const getState = () => store.getState()

bindAuthEvents(dispatch, getState);
bindTrackingEvents(dispatch, getState);

export const persistor = persistStore(store);

What can be the problem? and how is possible to fix it?

felire commented 5 years ago

Pay attention if you are using and Immutable library in your reducers, in my case i was using seamless-immutable. So i use this library https://github.com/hilkeheremans/redux-persist-seamless-immutable with redux-persist, and the implementation was something like that:

const transformerConfig = { whitelistPerReducer: { auth: ['userInfo'], discounts: ['discounts', 'myExchanges'], points: ['currentPoints', 'historyPoints'] } };

const persistConfig = { key: 'primary', storage: AsyncStorage, whitelist: ['auth', 'points', 'discounts'], stateReconciler: seamlessImmutableReconciler, transforms: [seamlessImmutableTransformCreator(transformerConfig)] };

atulpe commented 5 years ago

I think this is related: https://github.com/rt2zz/redux-persist/issues/1008