如何使用远程redux-devtools与NgRx

Question

我一直在Angular NativeScript(Android和iOS应用程序(项目中使用NgRx，它确实运行得很好。唯一让我困扰的是，我不能使用@ngrx/store-devtools和Redux DevToolsChrome扩展，因为这些应用程序运行在移动设备或模拟器上。我知道react-native可以连接到远程开发工具，所以如果NgRx可以使用远程开发工具的话，一定有办法。

我看到有一个适用于这种情况的包remote-redux-devtools(链接(，但我有点不知道如何将其连接到NgRx。我知道如何设置本地remotedev-server(链接(，以便Chrome扩展的Remote DevTools可以连接到它，，但我不知道如何将我的项目中的NgRx连接到remotedev-server

以下是设置NgRx的主Angular模块的示例。使用常规的redux项目，远程工具在存储初始化的地方连接。有人知道如何做这个NgRx吗？非常感谢。

import { NgModule, NO_ERRORS_SCHEMA, Optional, SkipSelf } from '@angular/core';
import { NativeScriptFormsModule } from '@nativescript/angular';
import { EffectsModule } from '@ngrx/effects';
import { StoreModule } from '@ngrx/store';
import { EntityDataModule, EntityDataService } from '@ngrx/data';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { PROVIDERS } from './services';
@NgModule({
declarations: [],
imports: [
NativeScriptFormsModule,
StoreModule.forRoot({}),  // With regular Redux the remote-devtools would go here.
EffectsModule.forRoot(),
EntityDataModule.forRoot(entityConfig),
StoreDevtoolsModule.instrument({  // Can remote-devtools be connected here somehow?
maxAge: 25,
logOnly: environment.production,
}),
],
providers: [
...PROVIDERS,
],
// ...

2020年1月26日编辑

只需提及@devakone发布的关于iconic框架的文章，因为我也找到了它，除了一部分之外，它几乎正是我所需要的。在这里，他使用window对象将远程开发工具扩展和Angular连接在一起。NativeScript中没有window对象，但我相信有一种方法可以以类似的方式访问devToolsExtension或__REDUX_DEVTOOLS_EXTENSION__。

import { NgModule } from '@angular/core';
import { RemoteDevToolsProxy } from './remote-devtools-proxy';
// ...
// Register our remote devtools if we're on-device and not in a browser
if (!window['devToolsExtension'] && !window['__REDUX_DEVTOOLS_EXTENSION__']) {
let remoteDevToolsProxy = new RemoteDevToolsProxy({
connectTimeout: 300000, // extend for pauses during debugging
ackTimeout: 120000, // extend for pauses during debugging
secure: false // dev only
});
// support both the legacy and new keys, for now
window['devToolsExtension'] = remoteDevToolsProxy;
window['__REDUX_DEVTOOLS_EXTENSION__'] = remoteDevToolsProxy;
}
@NgModule({
declarations: [MyApp],
// ...
StoreDevtoolsModule.instrument(),
// ...
})
export class AppModule {}

所以归根结底，我该怎么做：

window['devToolsExtension'] = remoteDevToolsProxy;
window['__REDUX_DEVTOOLS_EXTENSION__'] = remoteDevToolsProxy;

在NativeScript中，考虑到NativeScript没有window对象？在哪里可以访问devToolsExtension或__REDUX_DEVTOOLS_EXTENSION__？谢谢

Answer 1

我有一个演示repo，展示了如何使用Nativescript 7(NS7(和NG11实现这一点。我相信应该可以使用同样的方法将其装配到带有NG 12的Nativescript 8中。

https://linuxsimba.github.io/ns7-ng11-ngrx-remotedevtools