Store state get's overwritten when using ReduxDevToolsExtension

Hi there

Great project, first of all. I really enjoy the simplicity! I’ve played around with it a little bit and introduced a simple scenario in one of our angular apps. It all works quite well until I add the following line to my main.ts

ObservableStore.addExtension(new ReduxDevToolsExtension());

Now what I observe is, that the state of my store get’s overwritten by what seems are routing events:

{
  "__devTools": {
    "router": {
      "path": "/admin"
    },
    "action": "ROUTE_NAVIGATION"
  }
}

Here is my store:

import {Injectable} from '@angular/core';
import {ObservableStore} from '@codewithdan/observable-store';
import {SettingsStoreState, TenantSettings} from './settings.store.state';
import {Observable, of} from 'rxjs';
import {TenantSettingsDataApiService} from '../services/tenant-settings-data-api.service';
import {tap} from 'rxjs/operators';

@Injectable({
    providedIn: 'root'
})
export class SettingsStore extends ObservableStore<SettingsStoreState> {

    constructor(private tenantSettingsDataApiService: TenantSettingsDataApiService) {
        super({trackStateHistory: true});
    }

    get() {
        const settings = this.getState();
        if (settings) {
            return of(settings);
        } else {
            return this.tenantSettingsDataApiService
                .getSettings()
                .pipe(
                    tap(res => this.setState(res))
                );
        }
    }

    update(settings: TenantSettings): Observable<any> {
        return this.tenantSettingsDataApiService.updateSettings(settings)
            .pipe(
                tap(() => this.setState(settings, 'UPDATE_SETTINGS'))
            );
    }
}

So the first call to this.getState() somehow returns the Routing-Event which I posted above. (When it actually should find an empty state and initialize the store with the data from the backend). How is this possible?

Thanks for any pointers to a solution.

Kindly, riscie

Edit So I found the code, which adds the ROUTE_NAVIGATION Action. It’s part of the redux extension here: https://github.com/DanWahlin/Observable-Store/blob/master/modules/observable-store-extensions/redux-devtools.extension.ts. I am just no sure yet, why this is getting written into my own store.

[DanWahlin]

That’s a great point if you’re simply wanting to know if the store exists or not. I alway initialize mine with empty properties to start things (and then check if a given store property has a value or not) but in scenarios where you don’t want to do that the private property would definitely mess that up.

In the short term I’ll get the docs updated but in the long-term I’ll start thinking through what I’d need to do to make the private info completely separate because your scenario is completely valid and I wouldn’t want unexpected side effects. The tool assigns an ID so it’s definitely possible (I think 🤔), just some work to make it happen. Thanks again for the feedback.

[DanWahlin]

I added a section about the __devTools property into the readme so I’m going to close the issue. However, I’ve added your suggestion to my list of future enhancements and will definitely be thinking that through more for later updates to the library. Thanks again for asking about it!