javascript - One NGRX store, multiple Angular Applications
问题描述
So I'm a little bit nob with this. Hope you can apologise me.
I'm trying to insert multiple Angular elements (web components) into a Prestashop module, which is PHP. As there is not a single Angular App with many modules, I cannot use the store to send data from an element to another.
I have thought of creating a library which is in charge of creating the NGRX store, and kind of saves it to window.store (for instance), so the same store can be used by multiple independent angular apps. The issue here is that I have to invoke the library in many Angular elements, so I'm injecting different stores in the constructor. Am I right?
For instance:
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)
}
So to recap, if I want to share state between more than one independent angular app, how would you do?
I tried with localStorage, adding events to synchronize NGRX state with data in local storage and viceversa, but resulted, some times in a infinite loop and sometimes in edge cases in which data was not sync.
Thanks for your help and comprehension
解决方案
So for now, I kind of found a workaround to avoid the double instantiation of the store. Using a conditional injector.
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
}
}
I still haven't tested it to share data between the independent applications. Let's hope it works.
Any advice is always welcomed!!
推荐阅读
- c# - 饿死调度员的消息泵?
- hibernate - 无法在 HQL 中使用 size 函数
- perl - 如何在使用“使用严格”时将 STDOUT 分配给 var 并打印到该变量?
- timer - 这个使用 parseInt 的 javascript 计时器是如何工作的?
- php - 卷曲请求在本地主机上有效,但在我上传到 Ubuntu VPS 时无效
- google-bigquery - 解决 UDF 中的“相关子查询”错误
- react-native - 世博会推送通知在构建后不起作用
- java - 为什么它不运行“运行”方法?
- java - JMockit - 如何注入抽象方法
- go - 为什么 Gorm 不使用 Rows() 返回结果?