Creating an Observable that gets its value from a subscriptions calculation

Question

Hi i'm trying to create an Observable that will have values emitted to it from another subscription, it this case an ngrx Store Reducer.

export class IsolatedAgentService {
missionList$: Observable<any>; // I need this observables subscription to emit to calculatedValue$
calculatedValue$:Observable<any>; // I need this observable to get its values from the subscription of  missionList$ subscription
missionList:any;
constructor(
    private _store:Store<any>
){
    this.missionList$ = this._store.select(root_reducers.getMissionList).pipe(skip(1));
    this.missionList$.subscribe((val:any)=> {
        let mostIsolatedCountry:any; //will hold value of calculation
        this.missionList = val;
        mostIsolatedCountry = this.getMostIsolatedCountry(this.missionList);
        // I want tot emit mostIsolatedCountry to another subscription
    });
}

What I'm trying to do:

export class IsolatedAgentService {
  missionList$: Observable<any>;
  calculatedValue$:Observable<any> = Observable.create((observer)=>{
    // moved this line here from the previous missionList$ subscription
    let calculated:any = this.getMostIsolatedCountry(this.missionList);
    observer.next(calculated)
  });
  missionList:any;
  calculatedValue:any;
  constructor(
    private _store:Store<any>
  ){
    this.missionList$ = this._store.select(root_reducers.getMissionList).pipe(skip(1));
    this.missionList$.subscribe((val:any)=> {
        let mostIsolatedCountry:any; 
        this.missionList = val;
        this.calculatedValue$.subscribe((value)=>{
            this.calculatedValue = value;
        });
    });
}

Currently, I'm basically seting a class property in one subscription, then inside that same subscription, after setting the class property, I'm calling the second subscription which calculates the value from that set class property.

This does not feel right, and I'm sure its not the way to do it, but I'm lacking in my rxjs/observable knowledge at this point.

Note! Im not interested in emiting the calculated value trough a Store Action, I want an Observable that is specific to the class instance.

Answer 1

Here's the answer to your question:

export class IsolatedAgentService {
  missionList$: Observable<Mission[]>;
  calculatedValue$:Observable<any>;
  constructor(
    private _store:Store<any>
  ){
    this.missionList$ = this._store.select(root_reducers.getMissionList).pipe(skip(1));
    this.calculatedValue$ = this.missionList$.pipe( 
      map( missions => this.getMostIsolatedCountry(missions) )
    );
  }
}

or even

this.calculatedValue$ = this.missionList$.pipe(
    map( this.getMostIsolatedCountry )
);

See more about NGRX facades: https://medium.com/@thomasburleson_11450/ngrx-facades-better-state-management-82a04b9a1e39

Why you arent exposing & using observables why even subscribe in a service?

What you should have instead

export class IsolatedAgentService {
  missionList$: Observable<Mission[]>;
  calculatedValue$:Observable<any>;
  constructor(
    private _store:Store<any>
  ){
    this.missionList$ = this._store.select(root_reducers.getMissionList).pipe(skip(1));
    this.calculatedValue$ = this._store.select(root_reducers.getMissionCalculatedValue).pipe(skip(1));
  }
}

And a selector for doing that calculation you need.

export const getMissionCalculatedValue= createSelector(
  getMissionList,
  (missionList) => {
    // do the calculations here
    return calculationResult;
  }
);