Angular 15中如何用NgRx缓存API数据并重新加载？

一、优先选择 IndexedDB 作为缓存存储 #

因为你的数据量较大，localStorage（单域名上限约5-10MB）无法满足需求，IndexedDB 是更合适的选择：它支持大容量存储（通常无硬性上限，取决于设备剩余空间）、异步操作、索引查询，完全适配大体积信息流数据的缓存需求。

结合 NgRx 实现缓存预加载的思路 #

1. 持久化 NgRx 状态到 IndexedDB

   • 可以通过自定义 meta-reducer 监听NgRx状态变更，将指定的Feeds等数据切片异步写入IndexedDB；也可以在获取API数据的Effect中，成功获取数据后同时触发存储到IndexedDB的操作。
   • 推荐使用成熟的IndexedDB封装库（如dexie.js）简化操作，避免手写复杂的IndexedDB API：

     // 示例：在Effect中存储数据到IndexedDB
     loadFeeds$ = createEffect(() => 
       this.actions$.pipe(
         ofType(FeedsActions.loadFeedsSuccess),
         switchMap(({ feeds }) => 
           this.db.feeds.put(feeds).pipe(map(() => FeedsActions.cacheFeedsSuccess()))
         )
       )
     );
     

2. 应用启动/组件初始化时预加载缓存

   • 在App初始化的Effect（或组件的ngOnInit中），先从IndexedDB读取缓存数据，立即dispatch action将缓存数据存入NgRx状态，让组件先渲染缓存内容；随后触发API同步请求，获取最新数据后更新NgRx状态和缓存。

     // 示例：预加载缓存并同步更新
     preloadFeeds$ = createEffect(() => 
       this.actions$.pipe(
         ofType(FeedsActions.preloadFeeds),
         switchMap(() => 
           this.db.feeds.toArray().pipe(
             map(cachedFeeds => FeedsActions.loadFeedsSuccess({ feeds: cachedFeeds })),
             tap(() => this.store.dispatch(FeedsActions.loadFeeds())), // 触发API同步
             catchError(() => of(FeedsActions.loadFeeds())) // 无缓存直接请求API
           )
         )
       )
     );
     

二、其他可选方案 #

1. Service Worker + Cache API #

如果你的应用是PWA，可以借助Service Worker的Cache API缓存API请求本身：

• 配置Service Worker的缓存策略（如stale-while-revalidate），让组件发起API请求时，先返回缓存的响应，后台再同步最新数据。
• 这种方式无需直接操作NgRx状态，适合缓存API层面的数据，但需要额外配置PWA相关依赖（Angular的@angular/pwa）。

2. NgRx 专用持久化库（适配大体积数据） #

避免使用@ngrx/localstorage（底层依赖localStorage，不支持大体积数据），可以选择基于IndexedDB的NgRx持久化方案，比如自定义封装持久化逻辑：

• 自定义meta-reducer，在状态变更时将数据写入IndexedDB，启动时读取并初始化NgRx状态。

关键注意事项 #

• 数据过期策略：需要为缓存数据设置过期时间，避免展示过时内容，比如在存储时记录时间戳，预加载时判断是否过期，过期则直接请求API。
• 异步操作处理：IndexedDB和API请求都是异步操作，要确保NgRx状态更新的顺序正确，避免缓存数据覆盖最新的API响应。
• 数据切片优化：如果NgRx状态中只有部分数据需要缓存（比如Feeds的近期数据），可以只持久化指定的状态切片，减少存储体积和操作耗时。

内容的提问来源于stack exchange，提问作者Sherif Mo Shalaby