一个NGRX存储，多个Angular应用程序

Question

所以我对此有点不熟悉。希望你能向我道歉。

我正在尝试将多个Angular元素(web组件(插入到Prestashop模块中，该模块就是PHP。由于没有一个Angular应用程序包含许多模块，我无法使用存储将数据从一个元素发送到另一个元素。

我曾想过创建一个库，负责创建NGRX存储，并将其保存到window.store中(例如(，这样多个独立的angular应用程序就可以使用同一个存储。这里的问题是，我必须在许多Angular元素中调用库，所以我在构造函数中注入不同的存储。我说得对吗？

例如：

import {
ActionReducer,
ActionReducerFactory,
ActionReducerMap,
ActionReducerMap,
ActionsSubject,
ReducerManager,
ReducerManagerDispatcher,
StateObservable,
Store,
} from '@ngrx/store'
import { Observable } from 'rxjs';
const storeName = 'store'
@Injectable({
providedIn: 'root'
})
export class StoreSyncService {
store: any = null
// option 1 constructor:
// are we, when including the library in others angular apps, instantiating store over and over?
constructor(private store: Store) {
if (window[storeName]) {
this.store = window[storeName]
} else{
window[storeName] = this.store
}
}
// option 2 constructor (please apologise me as I don't know how injection works very well).
// Any link to clarify this is welcome
constructor() {
if (window[storeName]) {
this.store = window[storeName]
} else{
const stateObservable$: StateObservable = new Observable()
const actionsObserver: ActionsSubject = new ActionsSubject()
const dispatcher: ReducerManagerDispatcher = new ActionsSubject()
const initialState = {}
const reducers: ActionReducerMap<any, any> = {}
const reducerFactory: ActionReducerFactory<any, any> =  whatever
const reducerManager: ReducerManager = new ReducerManager(dispatcher, initialState, reducers, reducerFactory)
this.store = new Store(stateObservable$, actionsObserver, reducerManager)
window[storeName] = this.store
}
}
public getStore = () => this.store
public addReducer = (reducerName: string, reducer: ActionReducer<any>) => this.store.addReducer(reducerName, reducer)
public removeReducer = (reducerName: string) => this.store.removeReducer(reducerName)
}

综上所述，如果我想在多个独立的angular应用程序之间共享状态，你会怎么做？

我尝试使用localStorage，添加事件以将NGRX状态与本地存储中的数据同步，反之亦然，但结果有时是无限循环，有时是数据不同步的边缘情况。

感谢您的帮助和理解

Answer 1

所以目前，我找到了一种解决方法来避免商店的双重实例化。使用条件注射器。

import { Injectable, Injector } from '@angular/core';
...

constructor(private injector : Injector) {
if (window[storeName]) {
this.store = window[storeName]
} else{
this.store = this.injector.get<Store>(Store);
window[storeName] = this.store
}
}

我还没有测试它在独立应用程序之间共享数据。希望它能起作用。

欢迎任何建议！！