Why on state change loading hasn't dismissed in ionic4 ngrx/store?

Why on state change loading hasn’t dismissed ? Look - presentLoading() function. In NgRx Store DevTools - “isLoading” state changed correctly after call action on subscribe to store but loading in progress. Thanks for any help!

import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { State } from '../store/reducers';
import * as DogsActions from '../store/actions/dogs';
import { Observable } from 'rxjs';
import { LoadingController } from '@ionic/angular';
import {environment} from '../../environments/environment';

@Component({
  selector: 'app-profile',
  templateUrl: 'profile.page.html',
  styleUrls: ['profile.page.scss']
})
export class ProfilePage {
    dogImgUrl$: Observable<string>;
    env$: string;
    isLoading$: Observable<boolean>;
    /*
     * The store is injected in the constructor by angular
     * The store will then be used to retrieve data from the store and pass then to components
     * The store will also be used to dispatch action to the store on certain event
     * The State is the global state of the application. It is used by typescript help the developper
     */
    constructor(private _store: Store<State>, public _loadingController: LoadingController) {
        /*
       * We are getting the imgUrl from the store
       */
        this.dogImgUrl$ = _store.select(state => state.dogs.currentDog.imgUrl);

        // Get the "isLoading" boolean from the store
        this.isLoading$ = _store.select(state => state.dogs.isLoading);

        this.env$ = environment.apiUrl;

        // Each time isLoading change, subscribe callback is called
        this.isLoading$.subscribe(isLoading => this.presentLoading(isLoading));
    }

    onFindAnotherDogClicked() {
        // Dispatch the "findAnotherDog" action using the _store injected in the constructor
        this._store.dispatch(new DogsActions.FetchRandomDog());
    }

    async presentLoading(isLoading: boolean) {
        const loading = await this._loadingController.create({
            message: 'Загружаю...'
        });
        if (isLoading) {
            await loading.present();
        } else {
            await loading.dismiss();
        }
    }
}
1 Like

Hi, same problem :confused: ionic 4 and angular 7.2

I think its because every call to the function creates a new loading object and then you cant get the one you want to dismiss. Maybe storing in a global variable outside to that scope can do the trick