NgRx 和 localStorage 的组合

Question

我对 NGRX 和状态管理的概念有点陌生，因为我来自后端开发，每当我看到和听到状态管理这个术语时，我脑海中浮现的就是 CQRS。

嗯，互联网上的一些文章说它是以此为模式的。我的问题是..在我的角度应用程序中。

我可以做类似的事情，从后端获取数据然后保存到本地存储（如果不存在）吗？所以每个获取请求都会查看本地存储，每个保存、更新删除都会直接发送到 REST API，然后如果后端结果成功则更新本地存储？

我一直在寻找一些关于这方面的例子，但我对此感到非常不幸。

另外，之所以选择本地存储，是因为我也在考虑 PWA

Answer 1

NGRX 允许您创建中间件Document。

开发人员可以将元减速器视为操作->减速器管道的挂钩。元减速器允许开发人员在调用普通减速器之前预处理操作。

import merge from 'lodash.merge';
import { StoreModule, ActionReducer, MetaReducer } from '@ngrx/store';
import { reducers } from './reducers';
 
export function storageMetaReducer<S, A extends Action = Action>(reducer: ActionReducer<S, A>) {
      return function(state: S, action: A): S {
        const nextState = reducer(state, action);
        const savedState = JSON.parse(localStorage.getItem('__storage__')) || {};
        merge(nextState, savedState);
        localStorage.setItem('__storage__', nextState)
        return nextState;
      };
    }
    
export const metaReducers: MetaReducer<any>[] = [storageMetaReducer];

@NgModule({
  imports: [
    StoreModule.forRoot(reducers, { metaReducers })
  ],
})

localStorage 与 sessionStorage 之间的主要区别

localStorage 在选项卡之间是持久的，而 sessionStorage 是针对每个选项卡的。