angular - NgRx 和 localStorage 的结合

Question

我对 NGRX 和状态管理的概念有点陌生，因为我来自后端开发，每当我看到和听到状态管理这个词时，我就会想到 CQRS。

嗯，互联网上的一些文章说它是从那里仿制的。我的问题是..在我的 Angular 应用程序中。

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

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

另外，本地存储的原因是因为我也在考虑 PWA

Answer 1

NGRX 允许您创建一个中间件 Document .

开发人员可以将 meta-reducer 视为 action->reducer 管道的 Hook 。 Meta-reducer 允许开发人员在调用普通 reducer 之前预处理操作。

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 是每个选项卡。