如何在 NgRx 中使用 remote-redux-devtools？

Question

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

我看到有一个 package 用于这种情况remote-redux-devtools (link)但我对如何将它连接到 NgRx 有点迷茫。 我了解如何设置本地remotedev-server （链接） ，以便 Chrome 扩展程序中的Remote DevTools可以连接到它，但我不确定如何将我的项目中的 NgRx 连接到remotedev-server 。

这是一个主要 Angular 模块的示例，其中设置了 NgRx。 使用常规 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 object 将远程开发工具扩展和 Angular 联系在一起。 NativeScript 中没有window object 但我确信有一种方法可以访问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 object？ 我在哪里可以访问devToolsExtension或__REDUX_DEVTOOLS_EXTENSION__ ？ 谢谢！

Answer 1

这篇文章在指导您完成它方面做得很好。

Answer 2

我有一个演示 repo，展示了如何使用 Nativescript 7(NS7) 和 NG11 执行此操作。 我相信应该可以使用相同的方法将其与带有 NG 12 的 Nativescript 8 一起使用。

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