Search code examples
javascriptreactjsreact-nativelocal-storageredux-persist

App crashes when updating from app store or play store because it has old localstorage


I have used redux-persist for persisting the data to redux store. I have added few new flags in store now, but when application is updated from the store it doesn't get the new flags as it has the old local storage and local storage doesn't clear up on updating app. This is resulting in a app crash until I reinstall the application after deleting it.

'use strict';

/* React Native */
import { AsyncStorage } from 'react-native';

/* Officetrax */
import { createStore, applyMiddleware } from 'redux';
import app from './reducers';

/* Thunk */
import thunk from 'redux-thunk';

/* Redux Storage */
import excludeSaveActionConstants from './constants/excludeSaveActionConstants';

/* Remote Redux Dev Tools */
import { composeWithDevTools } from 'remote-redux-devtools';

/* Redux Offline */
import { offline } from '@redux-offline/redux-offline';
import offlineConfig from '@redux-offline/redux-offline/lib/defaults';

/* Redux Logger */
import { createLogger } from 'redux-logger';

export default function configureStore() {




    // Create redux logger
    const logger = createLogger({
        //logger: remoteConsole,
        logErrors: true,
    });

    let persistOptions = { ...offlineConfig, whitelist: excludeSaveActionConstants };

    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || composeWithDevTools;
    // Create the store with middleware applied
    let store = createStore(app, composeEnhancers(
        applyMiddleware(thunk),
        offline(persistOptions)
    ));

    return store;
}

Solution

  • If you are changing reducers structure you should migrate, or as Jesse Schokker suggested clear all cache, but if you really don't want to lose some of that data, then go for the migrate.

    import { createMigrate } from 'redux-persist';
    
    const migrations = {
        2: state => {
          const { yourReducer } = state;
          const mynewStructure = { ...yourReducer, myNewKey: 'some value' }; 
          state.yourReducer = mynewStructure;
          return state;
          };
        }
      };
    
      const persistConfig = {
        ...offlineConfig, 
        whitelist: excludeSaveActionConstants
        version: 2, // Add a version which will correspond to the number declared in your migrate
        migrate: createMigrate(migrations, { debug: false })
      };