CODEWITHSUNDEEP
angularrxjsangular2-servicesngrx
Yonatan
Yonatan

Reputation: 1387

Observable.subscribe() works only once (ngrx\angular2)

I'm subscribing to a store property in a component constructor

constructor(private someService: SomeService){
        someService.someObservable.subscribe((data: Some)=> {
            this.some = data;
            console.log('changed');
        });
}

In the service, the constructor looks like this:

constructor(private store: Store<any>){
        this.someObservable = <Observable<{}>>store.select('some');
}

I keep changing the state of this object, but the logging only appear once. What's also weird is that I'm accessing the this.some property directly in my template (without async pipe), and it updates perfectly! It seems like the this.some property is being updated, but the next() in the subscription isn't working.

help anyone? thanks!

Upvotes: 15

Views: 6881

Answers (4)

binbin
binbin

Reputation: 131

I had same problem and I find the reason is that you edited state, not created new object for state, for ex:

Do: Object.assign({}, state, {smt: changed}) }

Instead of: Object.assign(state, {smt: changed}) }

Upvotes: 0

pbalaga
pbalaga

Reputation: 2068

In my very similar case the problem was that one of the subscription handlers was throwing an error. When an error is encountered the observable stream stops emitting new values.

Upvotes: 5

Sumudu
Sumudu

Reputation: 27

Make sure you are returning a new object from your reducer if you update a property and return same object it would not trigger store update event

switch (action.type) {

    case MAIN_MENU_TOGGLE : {

Ex return Object.assign({},appSettings, {isMainMenuExpand: flag}) }

Upvotes: 0

icSapper
icSapper

Reputation: 244

You should not call for services in the constructor and its considered as a bad practice. Use ngOnInit() method to subscribe for a service. This method will be called automatically when the component is loading.

Try like this, this might solve your problem.

import {Component, OnInit} from "@angular/core";

export class YourComponent implements OnInit{

    ngOnInit():void {
       //handle your subscription here
    }

}

Upvotes: 0

Related Questions