Feature/mobx

README.md

@@ -36,8 +36,10 @@ Each Pull Request will contain explanation and steps taken to complete a feature
 ## Installing Frameworks and Libs
 
 - [Add Boostrap 4](https://github.com/brunolm/angular-how-to/pull/5)
+- [Add Mobx (redux-like)](https://github.com/brunolm/angular-how-to/pull/22)
 - [Add Redux](https://github.com/brunolm/angular-how-to/pull/14)
   - [API call in Redux](https://github.com/brunolm/angular-how-to/pull/16)
+  - [redux tag](https://github.com/brunolm/angular-how-to/tree/redux)
 
 ## Routes
 

package.json

@@ -43,6 +43,8 @@
     "camelcase-keys": "^4.2.0",
     "core-js": "^2.4.1",
     "marked": "^0.4.0",
+    "mobx": "^5.0.3",
+    "mobx-angular": "^3.0.1",
     "ngx-redux-state-props": "0.0.6",
     "ngx-take-until-destroy": "^3.0.0",
     "redux": "^4.0.0",

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

@@ -0,0 +1,15 @@
+import { inject, TestBed } from '@angular/core/testing';
+
+import { AboutStoreService } from './about-store.service';
+
+describe('AboutStoreService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [AboutStoreService],
+    });
+  });
+
+  it('should be created', inject([AboutStoreService], (service: AboutStoreService) => {
+    expect(service).toBeTruthy();
+  }));
+});

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

@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import { action, observable } from 'mobx-angular';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AboutStoreService {
+  @observable title: string;
+
+  constructor() {
+    this.initialize();
+  }
+
+  @action
+  private initialize() {
+    this.title = 'about:hello world';
+  }
+
+  @action
+  randomTitle() {
+    // tslint:disable-next-line:no-magic-numbers
+    this.title = Math.random().toString(32);
+  }
+}

src/app/about/about.component.html

@@ -4,6 +4,12 @@
   </p>
 </div>
 
+<div>
+  <h3>Mobx</h3>
+  <p>{{ store?.about?.title }}</p>
+  <button class="btn btn-primary" (click)="updateTitle()">Change title</button>
+</div>
+
 <button (click)="testRedux()" class="btn btn-primary">Test redux</button>
 -
 <button class="btn btn-primary" (click)="getNasaApod()">APOD</button>

src/app/about/about.component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { NgxReduxStatePropsService } from 'ngx-redux-state-props';
 
 import { AppState } from '../app-state.model';
+import { AppStoreService } from '../app-store.service';
 import { AboutActions } from './services/about.actions';
 
 @Component({
@@ -17,7 +18,11 @@ export class AboutComponent {
   - here
     - or here`;
 
-  constructor(private actions: AboutActions, private redux: NgxReduxStatePropsService<AppState>) {}
+  constructor(
+    private actions: AboutActions,
+    private redux: NgxReduxStatePropsService<AppState>,
+    public store: AppStoreService,
+  ) {}
 
   get state() {
     return this.redux.appState && this.redux.appState.about;
@@ -30,4 +35,8 @@ export class AboutComponent {
   getNasaApod() {
     this.actions.getNasaApod();
   }
+
+  updateTitle() {
+    this.store.about.randomTitle();
+  }
 }

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

@@ -0,0 +1,15 @@
+import { inject, TestBed } from '@angular/core/testing';
+
+import { AppStoreService } from './app-store.service';
+
+describe('AppStoreService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [AppStoreService],
+    });
+  });
+
+  it('should be created', inject([AppStoreService], (service: AppStoreService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/app-store.service.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+
+import { AboutStoreService } from './about/about-store.service';
+import { ContactStoreService } from './contact/contact-store.service';
+import { HeroesStoreService } from './heroes/heroes-store.service';
+import { TutorialsStoreService } from './tutorials/tutorials-store.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AppStoreService {
+  constructor(
+    public about: AboutStoreService,
+    public contact: ContactStoreService,
+    public heroes: HeroesStoreService,
+    public tutorials: TutorialsStoreService,
+  ) {}
+}

src/app/app.component.ts

@@ -1,6 +1,7 @@
 import { NgReduxRouter, routerReducer } from '@angular-redux/router';
 import { DevToolsExtension, NgRedux } from '@angular-redux/store';
 import { Component } from '@angular/core';
+import { configure } from 'mobx';
 import { combineReducers } from 'redux';
 import thunk from 'redux-thunk';
 
@@ -30,6 +31,7 @@ export class AppComponent {
       this.devTools.isEnabled() ? [this.devTools.enhancer()] : undefined,
     );
     this.ngReduxRouter.initialize();
+    configure({ enforceActions: 'strict' });
   }
 
   createReducer(ReducerService) {

src/app/app.module.ts

@@ -2,23 +2,30 @@ import { NgReduxRouterModule } from '@angular-redux/router';
 import { NgReduxModule } from '@angular-redux/store';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { MobxAngularModule } from 'mobx-angular';
 import { NgxReduxStatePropsModule } from 'ngx-redux-state-props';
 
+import { AboutStoreService } from './about/about-store.service';
+import { AppStoreService } from './app-store.service';
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app.router';
+import { ContactStoreService } from './contact/contact-store.service';
+import { HeroesStoreService } from './heroes/heroes-store.service';
 import { SharedModule } from './shared/shared.module';
+import { TutorialsStoreService } from './tutorials/tutorials-store.service';
 
 @NgModule({
   declarations: [AppComponent],
   imports: [
     AppRoutingModule,
     BrowserModule,
     SharedModule,
+    MobxAngularModule,
     NgReduxModule,
     NgReduxRouterModule.forRoot(),
     NgxReduxStatePropsModule,
   ],
-  providers: [],
+  providers: [AppStoreService, AboutStoreService, ContactStoreService, HeroesStoreService, TutorialsStoreService],
   bootstrap: [AppComponent],
 })
 export class AppModule {}

src/app/contact/contact-store.service.spec.ts

@@ -0,0 +1,15 @@
+import { inject, TestBed } from '@angular/core/testing';
+
+import { ContactStoreService } from './contact-store.service';
+
+describe('ContactStoreService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [ContactStoreService],
+    });
+  });
+
+  it('should be created', inject([ContactStoreService], (service: ContactStoreService) => {
+    expect(service).toBeTruthy();
+  }));
+});

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

@@ -0,0 +1,6 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ContactStoreService {}

src/app/contact/form/form.component.html

@@ -1,3 +1,8 @@
+<div>
+  <h3>About page title is</h3>
+  <p>{{ store?.about?.title }}</p>
+</div>
+<hr>
 <form (ngSubmit)="submit()" [formGroup]="contactForm">
   <div class="form-group">
     <label for="email"></label>

src/app/contact/form/form.component.ts

@@ -1,6 +1,8 @@
 import { Component } from '@angular/core';
 import { FormBuilder, Validators } from '@angular/forms';
 
+import { AppStoreService } from '../../app-store.service';
+
 @Component({
   selector: 'app-form',
   templateUrl: './form.component.html',
@@ -12,7 +14,7 @@ export class FormComponent {
     message: this.formBuilder.control('', Validators.required),
   });
 
-  constructor(private formBuilder: FormBuilder) {}
+  constructor(private formBuilder: FormBuilder, public store: AppStoreService) {}
 
   submit() {
     if (this.contactForm.invalid) {

src/app/heroes/heroes-store.service.spec.ts

@@ -0,0 +1,15 @@
+import { inject, TestBed } from '@angular/core/testing';
+
+import { HeroesStoreService } from './heroes-store.service';
+
+describe('HeroesStoreService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [HeroesStoreService],
+    });
+  });
+
+  it('should be created', inject([HeroesStoreService], (service: HeroesStoreService) => {
+    expect(service).toBeTruthy();
+  }));
+});

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

@@ -0,0 +1,6 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class HeroesStoreService {}

src/app/tutorials/tutorials-store.service.spec.ts

@@ -0,0 +1,15 @@
+import { inject, TestBed } from '@angular/core/testing';
+
+import { TutorialsStoreService } from './tutorials-store.service';
+
+describe('TutorialsStoreService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [TutorialsStoreService],
+    });
+  });
+
+  it('should be created', inject([TutorialsStoreService], (service: TutorialsStoreService) => {
+    expect(service).toBeTruthy();
+  }));
+});

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

@@ -0,0 +1,6 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class TutorialsStoreService {}