Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Store state get's overwritten when using ReduxDevToolsExtension

See original GitHub issue

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 './';
import {Observable, of} from 'rxjs';
import {TenantSettingsDataApiService} from '../services/tenant-settings-data-api.service';
import {tap} from 'rxjs/operators';

    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
                    tap(res => this.setState(res))

    update(settings: TenantSettings): Observable<any> {
        return this.tenantSettingsDataApiService.updateSettings(settings)
                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: I am just no sure yet, why this is getting written into my own store.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:6 (4 by maintainers)

github_iconTop GitHub Comments

DanWahlincommented, Jan 17, 2020

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.

DanWahlincommented, Jan 20, 2020

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!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Modify state in Redux DevTools Extension
A similar hack to the export / import. I use localstorage to persists state when a user closes the browser tab. So I...
Read more >
Doesn't automatically follow state anymore · Issue #1081
Open the panel through the extensions toolbar. · Right-click > Inspect to open the Chrome DevTools for the extension. · Go to the...
Read more >
Managing your React state with Redux
In this post we will take a look at using Redux for managing the state in React apps. ... It is also available...
Read more >
Redux Fundamentals, Part 3: State, Actions, and Reducers
The official Redux Fundamentals tutorial: learn how reducers update state in response to actions.
Read more >
The only introduction to Redux (and React-Redux) you'll ...
We'll take a brief look at the Redux DevTools extension at the end of the first ... As you've already guessed, the store...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found