ngrx / store-devtools

Developer Tools for @ngrx/store
MIT License
326 stars 38 forks source link

Does not work with custom actions? #44

Closed buehler closed 7 years ago

buehler commented 7 years ago

Chrome extension version: 2.12

{
"dependencies": {
    "@angular/common": "~2.4.0",
    "@angular/compiler": "~2.4.0",
    "@angular/core": "~2.4.0",
    "@angular/flex-layout": "^2.0.0-beta.1",
    "@angular/forms": "~2.4.0",
    "@angular/http": "~2.4.0",
    "@angular/material": "^2.0.0-beta.1",
    "@angular/platform-browser": "~2.4.0",
    "@angular/platform-browser-dynamic": "~2.4.0",
    "@angular/platform-server": "~2.4.0",
    "@angular/router": "~3.4.0",
    "@angularclass/conventions-loader": "^1.0.2",
    "@angularclass/hmr": "~1.2.2",
    "@angularclass/hmr-loader": "~3.0.2",
    "@ngrx/core": "^1.2.0",
    "@ngrx/effects": "^2.0.0",
    "@ngrx/router-store": "^1.2.5",
    "@ngrx/store": "^2.2.1",
    "assets-webpack-plugin": "^3.4.0",
    "core-js": "^2.4.1",
    "http-server": "^0.9.0",
    "ie-shim": "^0.1.0",
    "moment": "^2.17.1",
    "rxjs": "5.0.1",
    "zone.js": "~0.7.4"
  }
}

Hey guys, I try to use the cool dev-tools, but I'm limited to the initial state somehow :-(

it is imported as such:

[...
    StoreModule.provideStore(reducer),
    RouterStoreModule.connectRouter(),
    StoreDevtoolsModule.instrumentOnlyWithExtension(),
...]

But only the ngrx/store/init action is catched.

It is to say, that I use custom actions since I don't like the concept of the strings.

my actions are as such:

import { Action } from '@ngrx/store';

export abstract class RxAction<T> implements Action {
    private _type: string;

    public get type(): string {
        return this._type || this.constructor.name;
    }

    public set type(value: string) {
        this._type = value;
    }

    constructor(public payload: T) { }
}

export abstract class RxErrorAction extends RxAction<Error> {
    constructor(error: Error) {
        super(error);
    }
}

export abstract class RxEmptyAction extends RxAction<undefined> {
    constructor() {
        super(undefined);
    }
}

export class FoobarAction extends RxAction<string> { }

The problem is, that all those dispatched actions are not catched by the dev tools.

this.store.dispatch(new FoobarAction('hello world'))

Is there anything I can do? Cheers Chris