0

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

我看到有一个适用于这种情况的包remote-redux-devtools (链接),但我对如何将它连接到 NgRx 有点迷茫。我了解如何设置本地remotedev-server (链接) ,以便Remote DevToolsChrome 扩展程序可以连接到它,但我不确定如何将我的项目中的 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对象,但我确信有一种方法可以访问devToolsExtensionor__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__?谢谢!

4

2 回答 2

0

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

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

于 2021-05-16T21:19:40.290 回答
0

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

于 2021-01-23T17:28:46.307 回答