Async action with mobx

Author: brunolm

src/app/about/about-store.service.ts

@@ -1,13 +1,16 @@
 import { Injectable } from '@angular/core';
+import { runInAction } from 'mobx';
 import { action, observable } from 'mobx-angular';
 
+import { NasaService } from '../shared/nasa.service';
+
 @Injectable({
   providedIn: 'root',
 })
 export class AboutStoreService {
   @observable title: string;
 
-  constructor() {
+  constructor(private nasaService: NasaService) {
     this.initialize();
   }
 
@@ -16,9 +19,11 @@ export class AboutStoreService {
     this.title = 'about:hello world';
   }
 
-  @action
-  randomTitle() {
-    // tslint:disable-next-line:no-magic-numbers
-    this.title = Math.random().toString(32);
+  async randomTitle() {
+    const response = await this.nasaService.getApod();
+
+    runInAction(() => {
+      this.title = response.title;
+    });
   }
 }

src/app/about/about.component.ts

@@ -36,7 +36,7 @@ export class AboutComponent {
     this.actions.getNasaApod();
   }
 
-  updateTitle() {
-    this.store.about.randomTitle();
+  async updateTitle() {
+    await this.store.about.randomTitle();
   }
 }