如何防止同一域名下不同Angular应用共用同一NGRX Store？

为啥会出现这种情况？ #

要么是两个应用跑在同一个浏览器上下文里（比如微前端嵌入、同页面加载两个应用），NGRX的Store实例在全局环境里冲突了；要么是你开启了状态持久化（比如用@ngrx/store-localstorage），两个应用用了同一个存储键，读写同一份本地数据。

具体解决办法 #

1. 给每个应用的Store配置专属存储键（用持久化必做） #

如果用了状态持久化，直接修改localStorageSync的key参数，让两个应用使用不同的键即可：

// 应用A的配置
export const metaReducers: MetaReducer<State>[] = [
  localStorageSync({ key: 'appA-store', rehydrate: true })
];

// 应用B的配置
export const metaReducers: MetaReducer<State>[] = [
  localStorageSync({ key: 'appB-store', rehydrate: true })
];

2. 微前端场景下隔离Store实例 #

如果是用Module Federation这类微前端方案，要保证每个应用的Store完全独立：
在根模块的StoreModule.forRoot配置中，将Store设为模块私有，避免共享到全局注入器：

@NgModule({
  imports: [
    StoreModule.forRoot(reducers, {
      metaReducers,
      runtimeChecks: {
        strictStateImmutability: true,
        strictActionImmutability: true,
      }
    }),
  ],
  providers: [{ provide: Store, useClass: Store, deps: [Injector] }]
})
export class AppModule {}

3. 给根State添加专属命名空间 #

要是没开持久化还出现状态共享，大概率是两个应用的Reducer结构完全一致导致的污染，给每个应用的根State加个独有的命名空间就行：

// 应用A的根State
export interface AppState {
  appA: { /* 你的应用A状态字段 */ };
}

// 应用B的根State
export interface AppState {
  appB: { /* 你的应用B状态字段 */ };
}

4. 独立页面场景下手动清理状态 #

如果是同域名下的两个独立页面，跳转时记得销毁前一个应用的Store：
在AppComponent的销毁钩子中清空状态，顺便删掉对应的本地存储：

import { Store } from '@ngrx/store';

export class AppComponent implements OnDestroy {
  constructor(private store: Store) {}

  ngOnDestroy() {
    this.store.dispatch({ type: '[App] Clear All State' });
    localStorage.removeItem('appA-store'); // 替换为你自己的存储键
  }
}

内容的提问来源于stack exchange，提问作者SolidShook