Managing data flow between NgRx store, IndexedDB cache, and database backend in Angular application

Backend
1

I’m working on an Angular project where I need to implement a caching strategy for user data. My setup includes a PostgreSQL database on the backend, NgRx for state management, and I want to add browser storage for offline capabilities.

Currently I fetch user profiles from the PostgreSQL backend and store them in NgRx state. Now I’m adding IndexedDB to cache this data locally so users can still see their profiles when they restart the browser without hitting the server every time.

I’m confused about how these three layers should work together:

  1. Should I load all cached data from IndexedDB into NgRx store when the app starts, then always read from the store?
  2. Would it be better to skip NgRx entirely and just use IndexedDB directly?
  3. When updating user data, which should I update first - the NgRx store or IndexedDB?
  4. Am I wasting memory by keeping the same data in both NgRx store and IndexedDB?

I want to make sure I’m not overcomplicating this or creating performance issues with duplicate data storage.

2

youre overthinking this. keep ngrx as your single source of truth and use indexeddb just for persistence. load from indexeddb into your store when the app starts, then work with the store from there. update the store first, sync to indexeddb after - keeps your ui fast while syncing happens in the background.

3

I’ve used this setup in production - treat each layer differently. NgRx handles your active app state, IndexedDB is your offline storage, and the backend stays your source of truth. When the app starts, load NgRx from IndexedDB so users get data immediately. For updates, use write-through: update NgRx first (fast UI), then save to IndexedDB, then sync with backend. Don’t worry about storing data twice - the memory hit is tiny compared to having offline support and snappy UX. You’ll need a sync mechanism to handle conflicts when users edit data offline and come back online. That part’s crucial.

4

interesting challenge! what’s your app’s usage pattern like? are users mostly online or do they go offline a lot? have you looked into ngrx/data? it’s built for exactly this - handles the coordination between your store and persistence layers really well.