mayrascript

import { Injectable } from '@angular/core';
import { CourseModel } from 'src/app/dashboard/shared/models/course.model';
import { StoreService } from 'src/app/core/services/store/store.service';
import { actions } from 'src/app/core/services/store/actions';
import { select } from 'src/app/core/services/store/operators';
import { Observable } from 'rxjs';
import { AppState } from 'src/app/core/services/store/app-state';
import { tap } from 'rxjs/operators';

@Injectable({

mayrascript

<div class="courses-list">
  <mat-card *ngFor="let course of courses$ | async">
    <mat-card-title>
      {{course.title}}
    </mat-card-title>
    <mat-card-content>
      {{course.desc}}

      <div>
        Fecha de Publicación {{course?.publicationDate | date:'short'}}

mayrascript

import { Observable } from 'rxjs';
import { distinctUntilChanged, map } from 'rxjs/operators';

export function select(key: string) {
  return (obs: Observable<{ [key: string]: any }>) =>
    obs.pipe(
      map(state => state[key]),
      distinctUntilChanged()
    );
}

mayrascript

import { Injectable } from '@angular/core';
import { Action } from 'src/app/core/services/store/reducers';
import { BehaviorSubject, Subject } from 'rxjs';
import { scan } from 'rxjs/operators';

class Dispatcher<T> extends Subject<T> {
  dispatch(value: any): void {
    this.next(value);
  }
}

mayrascript

export const actions = {
  initialState: 'INITIAL_STATE',
  add: 'ADD',
  remove: 'REMOVE',
  clear: 'CLEAR',
  update: 'UPDATE',
};

mayrascript

import { CourseModel } from 'src/app/dashboard/shared/models/course.model';

export interface AppState {
  courses: CourseModel[];
  currentCourse: CourseModel;
}

mayrascript

import { actions } from 'src/app/core/services/store/actions';
import { AppState } from 'src/app/core/services/store/app-state';

export interface Action {
  type: string;
  payload?: any;
}

export interface Reducer<T> {
  (state: T, action: Action): T;