我一直在 Angular NativeScript(Android 和 iOS 应用程序)项目中使用 NgRx,它确实运行良好。唯一困扰我的是我无法使用Chrome 扩展程序@ngrx/store-devtools,Redux 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__?谢谢!