How to use ngrx-store-localstorage - 10 common examples

export function localStorageSyncReducer(reducer: ActionReducer): ActionReducer {
  // This is done to ensure we don't accidentally apply state from session storage from another user.
  let globalUserId = null;
  return localStorageSync({
    storageKeySerializer: (id) => {
      return globalUserId || id;
    },
    syncCondition: () => {
      if (globalUserId) {
        return true;
      }
      const userId = getDashboardStateSessionId();
      if (userId) {
        globalUserId = userId;
        return true;
      }
      return false;
    },
    keys: ['dashboard'],
    rehydrate: false,

import { combineReducers } from '@ngrx/store';
import { compose } from '@ngrx/core/compose';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { getSidebarExpanded } from './app-layout';
import { storeRegistry, registerReducers } from './store.registry';

import { reducersRegisters, EchoesState } from './reducers';

import { localStorageSync } from 'ngrx-store-localstorage';

export { EchoesState } from './reducers';
const { actions, reducers } = registerReducers(reducersRegisters);

const composeStore = compose(
  localStorageSync(['videos', 'player', 'nowPlaylist', 'search', 'appLayout'], true),
  combineReducers
)(reducers);

const optionalImports = [];

if ('production' !== ENV) {
    // Note that you must instrument after importing StoreModule
    // optionalImports.push(StoreDevtoolsModule.instrumentOnlyWithExtension());
}
@NgModule({
  imports: [
    StoreModule.provideStore(composeStore),
    ...optionalImports
  ],
  declarations: [],
  exports: [],

export function localStorage(reducer: ActionReducer): ActionReducer {
  return localStorageSync({
    // Only store authentication
    keys: ['authentication'],
    rehydrate: true,
  })(reducer);
}

return function(reducer: ActionReducer): ActionReducer {
    return localStorageSync(storage)(reducer);
  };
}

return function(reducer: ActionReducer): ActionReducer {
    return localStorageSync(storage)(reducer);
  };
}

export function localStorageSyncReducer(reducer: ActionReducer): ActionReducer {
   return localStorageSync(localStorageConfig)(reducer);
}

ticket: fromTicket.reducer,
    account: fromAccount.reducer,
};

function applyDefaultState(reducer: ActionReducer): ActionReducer {
    const INITIAL_STATE = '@ngrx/store/init';

    return (state: State, action: Action): State => {
        if (action.type == INITIAL_STATE)
            state = _.merge({}, initialState, state);

        return reducer(state, action);
    };
}

const withLocalStorage = localStorageSync([
    { movie: ["entities", "mapMovieToCinema"] },
    { cinema: ["cinemas", "currentCinemaId", "screenings"] },
    { ticket: ["tickets"] },
    { account: ["account", "auth"] }],
    true);

const devReducer: ActionReducer = compose(withLocalStorage, applyDefaultState, storeFreeze, combineReducers)(reducers);
const prodReducer: ActionReducer = compose(withLocalStorage, applyDefaultState, combineReducers)(reducers);

export function reducer(state: State, action: any) {
    const production = false;

    if (production)
        return prodReducer(state, action);
    else
        return devReducer(state, action);

export function localStorageSyncReducer(
  reducer: ActionReducer
): ActionReducer {
  return localStorageSync({
    keys: Object.keys(EchoesReducers),
    rehydrate: true
  })(reducer);
}
const metaReducers: MetaReducer[] = [localStorageSyncReducer];

return function(
    reducer: ActionReducer
  ): ActionReducer {
    return localStorageSync(storage)(reducer);
  };
}

export function localStorageSyncReducer(reducer: ActionReducer): ActionReducer {
  return localStorageSync({ keys: ['projects'], rehydrate: true })(reducer);
}