angular-example

ngrx.js

const actionTypeSpendInit = 'SPEND_INIT'
const actionTypeSpendSuccess = 'SPEND_SUCCESS'
const actionTypeSpendError = 'SPEND_ERROR'

class ActionSpendInit {
  type = actionTypeSpendInit
  constructor(public payload)
}
class ActionSpendSuccess {
  type = actionTypeSpendSuccess
  constructor(public payload)
}
class ActionSpendError {
  type = actionTypeSpendError
  constructor(public payload)
}

@Injectable()
class FamilyEffects {
  @Effect()
  spend = this.actions$.pipe(
    ofType(actionTypesAssets.init),
    mergeMap((action) => this.http.get('http://server-url')
      .pipe(
        map((data) => new ActionSpendSuccess(data)),
        catchError((error) => of(new ActionSpendError(error)))
      )
    ),
  ) 
  
  constructor(private http: HttpClient, private actions$: Actions) {}
}

const reducerFamilyInitialState = { loading: false, funds: 100 }
const reducerFamily = (state = reducerFamilyInitialState, action) => {
  switch (action.payload) {
    case actionTypeSpendInit:
      return { ...state, loading: true }
    case actionTypeSpendSuccess:
      return { loading: false, funds: action.payload }
    case actionTypeSpendError:
      return { loading: false }
    defaut:
      return state
  }
} 

@Component({
  template: '<component-dad></component-dad>'
})
class ComponentFamily {}

@Component({
  template: '<component-child></component-child>'
})
class ComponentDad {}

@Component({
  template: '<div>My allowance is {{funds$ | async}} <button (click)="spend()"}>Buy ice cream</button></div>'
})
class ComponentChild {
  funds$
  
  constructor(private store: Store) {
    this.funds$ = this.store.pipe(
      select((state) => state.funds)
    )
  }
  
  spend() {
    this.store.dispatch(new ActionSpendInit(5))
  }
}

no-service.js

@Component({
  template: '<component-dad [state]="state" (spendRequest)="spend($event)"></component-dad>'
})
class ComponentFamily {
  state = { funds: 100 }

  spend (sum) {
    this.state = { ...this.state, funds: this.state.funds - sum }
  }
}

@Component({
  template: '<component-child [state]="state" (spendRequest)="spend($event)"></component-child>'
})
class ComponentDad {
  @Input() state
  @Output() spendRequest
}

@Component({
  template: '<div>My allowance is {{state.funds}} <button (click)="spend()"}>Buy ice cream</button></div>'
})
class ComponentChild {
  @Input() state
  @Output() spendRequest
  
  spend () {
    this.spendRequest.emit(5)
  }
}

with-service

@Injectable()
class FamilyService {
  state = { funds: 100 }
  
  spend (sum) {
    this.state = { ...this.state, funds: this.state.funds - sum }
  }
}

@Component({
  template: '<component-dad></component-dad>'
})
class ComponentFamily {}

@Component({
  template: '<component-child></component-child>'
})
class ComponentDad {}

@Component({
  template: '<div>My allowance is {{familyService.state.funds}} <button (click)="familyService.spend()"}>Buy ice cream</button></div>'
})
class ComponentChild {
  constructor(public familyService: FamilyService) {}
}