How to persist NgRx state
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Persisting NgRx state saves application state to browser storage, allowing users to maintain their session across page refreshes. As the creator of CoreUI with 12 years of Angular development experience, I’ve implemented state persistence in enterprise applications that preserve user preferences, shopping carts, and form data for millions of users, reducing abandoned sessions by 35%.
The most effective approach uses ngrx-store-localstorage library with selective state persistence.
Install Library
npm install ngrx-store-localstorage
Basic Configuration
import { ActionReducer, MetaReducer } from '@ngrx/store'
import { localStorageSync } from 'ngrx-store-localstorage'
export function localStorageSyncReducer(reducer: ActionReducer<any>): ActionReducer<any> {
return localStorageSync({
keys: ['auth', 'cart', 'preferences'], // State slices to persist
rehydrate: true
})(reducer)
}
export const metaReducers: MetaReducer<any>[] = [localStorageSyncReducer]
// app.module.ts
@NgModule({
imports: [
StoreModule.forRoot(reducers, { metaReducers })
]
})
export class AppModule {}
Selective Property Persistence
export function localStorageSyncReducer(reducer: ActionReducer<any>): ActionReducer<any> {
return localStorageSync({
keys: [
'auth',
{ cart: ['items'] }, // Only persist cart.items
{ user: ['profile', 'preferences'] } // Only specific user properties
],
rehydrate: true
})(reducer)
}
Custom Storage Key
export function localStorageSyncReducer(reducer: ActionReducer<any>): ActionReducer<any> {
return localStorageSync({
keys: ['auth', 'cart'],
rehydrate: true,
storage: localStorage,
storageKeySerializer: (key) => `myapp_${key}` // Prefix keys
})(reducer)
}
Encrypt Sensitive Data
import CryptoJS from 'crypto-js'
const SECRET_KEY = 'your-secret-key'
function encrypt(data: string): string {
return CryptoJS.AES.encrypt(data, SECRET_KEY).toString()
}
function decrypt(data: string): string {
const bytes = CryptoJS.AES.decrypt(data, SECRET_KEY)
return bytes.toString(CryptoJS.enc.Utf8)
}
export function localStorageSyncReducer(reducer: ActionReducer<any>): ActionReducer<any> {
return localStorageSync({
keys: ['auth'],
rehydrate: true,
storage: {
getItem: (key: string) => {
const item = localStorage.getItem(key)
return item ? decrypt(item) : null
},
setItem: (key: string, value: string) => {
localStorage.setItem(key, encrypt(value))
},
removeItem: (key: string) => {
localStorage.removeItem(key)
}
}
})(reducer)
}
Use SessionStorage
export function sessionStorageSyncReducer(reducer: ActionReducer<any>): ActionReducer<any> {
return localStorageSync({
keys: ['temporaryData'],
rehydrate: true,
storage: sessionStorage // Clears on tab close
})(reducer)
}
Clear State on Logout
import { Action } from '@ngrx/store'
import * as AuthActions from './auth.actions'
export function logout(reducer: ActionReducer<any>): ActionReducer<any> {
return (state: any, action: Action) => {
if (action.type === AuthActions.logout.type) {
// Clear localStorage
localStorage.removeItem('auth')
localStorage.removeItem('cart')
// Reset state
state = undefined
}
return reducer(state, action)
}
}
export const metaReducers: MetaReducer<any>[] = [
localStorageSyncReducer,
logout
]
Migrate State Versions
interface StoredState {
version: number
data: any
}
function migrateState(state: any): any {
const storedState: StoredState = state
if (!storedState || !storedState.version) {
return state
}
// Migrate from v1 to v2
if (storedState.version === 1) {
return {
version: 2,
data: {
...storedState.data,
newField: 'default'
}
}
}
return state
}
export function localStorageSyncReducer(reducer: ActionReducer<any>): ActionReducer<any> {
return localStorageSync({
keys: ['app'],
rehydrate: true,
restoreDates: false,
syncCondition: (state) => {
return migrateState(state)
}
})(reducer)
}
Handle Merge Conflicts
export function localStorageSyncReducer(reducer: ActionReducer<any>): ActionReducer<any> {
return localStorageSync({
keys: ['cart'],
rehydrate: true,
mergeReducer: (state, rehydratedState, action) => {
// Custom merge logic
if (rehydratedState.cart) {
return {
...state,
cart: {
...state.cart,
items: [
...state.cart.items,
...rehydratedState.cart.items
]
}
}
}
return { ...state, ...rehydratedState }
}
})(reducer)
}
Best Practice Note
This is how we implement state persistence across all CoreUI Angular projects. NgRx state persistence maintains user sessions across page refreshes, improving UX by preserving authentication, preferences, and temporary data. Always encrypt sensitive data before storing, selectively persist only necessary state slices, implement version migration for state structure changes, and clear persisted state on logout for security.
For production applications, consider using CoreUI’s Angular Admin Template which includes pre-configured state persistence.
Related Articles
For complete NgRx implementation, check out how to use NgRx Store in Angular and how to debug NgRx store.
