change - router events angular 6

Angular 2 usando ngrx+RxJS suscribiéndose en múltiples componentes/rutas para poblar la tienda

Question

Actualmente estoy compilando una aplicación Angular 2 usando Redux (ngrx) y RxJS (principalmente para fines de aprendizaje), sin embargo, sigue siendo un poco (por decir lo menos) confusa para mí.

Estoy intentando implementar una ruta "/ projects", así como una ruta "/ projects /: id". En ambos casos, el comportamiento es que realizo una solicitud HTTP para obtener los datos requeridos.

Actualmente, si navego a "proyectos" (ya sea por URL o llamada ajax a través de navegación) obtendrá los 15 proyectos más o menos del servidor y los agregará a la tienda de "proyectos" en Redux. Ahora, si actualmente intento ingresar desde un proyecto específico (desde la barra de búsqueda del navegador -> "localhost: 3000 / projects / 2", por ejemplo), solo obtendrá el que sea, que es lo que quiero y lo coloque en el almacenar, sin embargo, si navego a la sección "proyectos" desde allí, solo se imprimirá el proyecto que se encuentra en la tienda.

Lo que quiero lograr es lo siguiente:

• Si entro en "/ projects" primero, entonces busque y coloque todos los resultados en la tienda.
• Si se cumple el caso anterior y navego a un proyecto específico desde allí, utilizando una etiqueta de enlace, quiero verificar en la tienda el artículo que tiene ese ID específico y devolverlo.
• Si ingreso directamente desde "/ projects /: id", quiero buscar ese proyecto específico solo y colocarlo en la tienda.
• Si ocurre el punto inmediatamente anterior, quiero poder navegar a "/ projects", a través de mi menú o cualquier otro enlace, buscar todos los artículos y actualizar mi tienda de "proyectos" con todos los artículos (no solo el que ya existía) del punto anterior)
• Cualquier otro escenario lógico que pueda estar perdiendo respetando lo anterior

Quiero lograr esto de una manera eficiente, performante y elegante.

Actualmente estoy, creo, suscrito al mismo observable desde al menos dos lugares y no creo que ese sea el enfoque correcto. Además de eso, todavía no puedo obtener los resultados que quiero si entro primero de la ruta "/ projects: / id" y luego navego hacia la ruta "/ projects".

Aquí está el código que considero relevante:

projects.directive.ts

import { Component, OnInit } from ''@angular/core'';
import { ProjectsService } from ''../shared/services/projects.service'';
import { Observable } from ''rxjs/Observable'';
import { Project } from ''../../models/project.model'';

@Component({
  selector: ''projects'',
  templateUrl: ''./projects.html''
})
export class Projects implements OnInit {
  private projects$: Observable<Project[]>

  constructor(private projectsService: ProjectsService) {}

  ngOnInit() {
    this.projectsService.findProjects();
  }
}

projectOne.directive.ts

import { Component, OnInit } from ''@angular/core'';
import { Params, ActivatedRoute } from ''@angular/router'';
import { Observable } from ''rxjs/Observable'';
import { ProjectsService } from ''../../shared/services/projects.service'';
import { Project } from ''../../../models/project.model'';

@Component({
  selector: ''projectOne'',
  templateUrl: ''./projectOne.html''
})
export class ProjectOneComponent implements OnInit {
  private projects$: Observable<Project[]>

  constructor(private route: ActivatedRoute, private projectsService: ProjectsService) {}

  ngOnInit() {
    this.route.params.subscribe((params: Params) => {
      this.projectsService.findProjects(params[''id''])
    });
  }
}

* Algunas cosas para tener en cuenta aquí: me suscribo a this.route.params , que se suscribe a otro Observable, ¿necesito aplanar eso en absoluto o no? El concepto todavía me gana

projects.html

<section>
  <article *ngFor="let project of projectsService.projects$ | async">
    <p>{{project?._id}}</p>
    <p>{{project?.name}}</p>
    <img src="{{project?.img}}" />
    <a routerLink="{{project?._id}}">See more</a>
  </article>
</section>

* Aquí me gustaría señalar que también estoy usando projectsService.projects $ | asincrónico para imprimir los resultados en la iteración que estoy bastante seguro también afecta ...

projects.service.ts

import { Http } from ''@angular/http'';
import { Injectable } from ''@angular/core'';
import { Observable } from ''rxjs/Observable'';
import ''rxjs/add/operator/map'';
import { Store } from ''@ngrx/store'';
import { Project } from ''../../../models/project.model'';
import { AppStore } from ''../../app.store'';
import { ADD_PROJECTS } from ''../../../reducers/projects.reducer'';

@Injectable()
 export class ProjectsService {
  public projects$: Observable<Project[]>;

  constructor(private _http: Http, private store: Store<AppStore>){
    this.projects$ = store.select<Project[]>(''projects'');
  }

  fetchProjects(id) {
    return this._http.get(`/api/projects?id=${id}`)
    .map(res => res.json())
    .map(({projectsList}) => ({ type: ADD_PROJECTS, payload: projectsList }))
    .subscribe(action => this.store.dispatch(action));
  }

  findProjects(id: Number = 0) {
    this.projects$.subscribe(projects => {
      if (projects.length) {
        if (projects.length === 1) {
          return this.fetchProjects();
        }
      } else {
       return this.fetchProjects(id ? id : '''')
      }
    })
  }
}

* Supongo que cada vez que llamo a esa función "findProjects" me suscribo al Observable. No está bien, ¿eh?

* Además, con esta configuración actual cada vez que voy directamente a "/ projects /: id", parece que está ejecutando la función fetchProjects dos veces (eso me pareció mucho por el registro de la consola). Básicamente, la suscripción de this.projects $ dentro de findProjects salta y obtiene el proyecto con la identificación correspondiente, pero luego vuelve a entrar y recupera todos los demás proyectos y finalmente "desaparece". ¿Por qué se está llamando a sí mismo o de dónde viene la segunda llamada?

projects.reducer.ts

import { Project } from ''../models/project.model'';
import { ActionReducer, Action } from ''@ngrx/store'';

export const ADD_PROJECTS = ''ADD_PROJECTS'';

export const projects: ActionReducer<Project[]> = (state: Project[] = [], action: Action) => {
  switch (action.type) {
    case ADD_PROJECTS:
      return action.payload;
    default:
      return state;
  }
};

* Esto es todo lo que el reductor tiene por el momento porque todavía estoy súper estancado en el resto.

De todos modos, me gustaría agradecerles a todos por adelantado. Si algo no está claro en absoluto o si necesita más información, hágamelo saber. Sé que esto cubre más de una cosa y podría ser súper fácil o nada, pero estoy realmente ansioso por obtener tanta ayuda como sea posible porque estoy realmente atrapado aquí ... ¡Gracias de nuevo!

Answer 1

En general, su código se ve "bien". Sin embargo, hay algunas cosas que he notado:

• Estás haciendo cosas como comprobar el ect de longitud del proyecto. probablemente guarde una llamada de descanso; desde mi experiencia, diría que este tipo de cosas solo valen la pena si se transfieren muchos datos o si hay cálculos pesados ​​del servidor o si su aplicación tiene un par de miles de usuarios y realmente está buscando optimizar hasta el último bit del rendimiento de su servidor, de otro modo: simplemente busque los datos O divide su tienda en allProjects: Projects[] que no se vuelven a recopilar y selectedProject: Project que solo se obtiene si no se encuentra dentro de todos los allProjects
• en lo que se refiere a la nomenclatura de archivos, trate de evitar mayúsculas y nombre el componente de sus componentes y no la directiva .
• Dado que está utilizando ngrx para su tienda, es posible que desee echar un vistazo a ngrx / effects como alternativa a las acciones de envío desde su servicio -> esta parte sería muy opcional, pero en la aplicación ngrx perfecta , la información el servicio ni siquiera sabría que hay una tienda.

Dicho esto, aquí hay algunas mejoras de código que lo acercan más a una aplicación orientada a ngrx; sin embargo, aún sugiero que eche un vistazo a la aplicación oficial ngrx-example, que es muy buena :

projects.component.ts

@Component({
  selector: ''projects'',
  templateUrl: ''./projects.html''
})
export class Projects {
  private projects$: Observable<Project[]> = his.store
      .select<Project[]>(''projects'')
      .map(projects => projects.all)

  constructor(private store: Store<AppStore>) {
      store.dispatch({type: ProjectActions.LOAD_ALL});
  }
}

projects.component.html

<section>
  <article *ngFor="let project of projects$ | async">
    <!-- you don''t need to use the questionmark here (project?.name) if you have something like "undefined" or "null" in your array, then the problem lies somewhere else -->
    <p>{{project._id}}</p>
    <p>{{project.name}}</p>
    <img src="{{project.img}}" />
    <a routerLink="{{project._id}}">See more</a>
  </article>
</section>

project.component.ts

@Component({
  selector: ''projectOne'',
  templateUrl: ''./projectOne.html''
})
export class ProjectOneComponent implements OnInit {
  // project$ is only used with the async-pipe
  private project$: Observable<Project[]> = this.route.params
      .map(params => params[''id''])
      .switchMap(id => this.store
          .select<Project[]>(''projects'')
          .map(projects => projects.byId[id])
          .filter(project => !!project) // filter out undefined & null
      )
      .share();  // sharing because it is probably used multiple times in the template

  constructor(private route: ActivatedRoute,
              private store: Store<AppStore>) {}

  ngOnInit() {
    this.route.params
      .take(1)
      .map(params => params[''id''])
      .do(id => this.store.dispatch({type: ProjectActions.LOAD_PROJECT, payload: id})
      .subscribe();
  }
}

project.service.ts => no sabe sobre la tienda

@Injectable()
export class ProjectsService {
  constructor(private _http: Http){}

  fetchAll() {
      return this._http.get(`/api/projects`)
          .map(res => res.json());
  }

  fetchBy(id) {
    return this._http.get(`/api/projects?id=${id}`)
        .map(res => res.json());
  }
}

project.effects.ts

@Injectable()
export class ProjectEffects {
  private projects$: Observable<Project[]> = his.store
      .select<Project[]>(''projects'')
      .map(projects => projects.all);

  constructor(private actions$: Actions,
              private store: Store<AppStore>,
              private projectsService: ProjectsService){}

  @Effect()
  public loadAllProjects$: Observable<Action> = this.actions$
    .ofType(ProjectActions.LOAD_ALL)
    .switchMap(() => this.projectsService.fetchAll()
        .map(payload => {type: ProjectActions.ADD_PROJECTS, payload})
  );

  @Effect()
  public loadSingleProject$: Observable<Action> = this.actions$
    .ofType(ProjectActions.LOAD_PROJECT)
    .map((action: Action) => action.payload)
    .withLatestFrom(
        this.projects$,
        (id, projects) => ({id, projects})
    )
    .flatMap({id, projects} => {
        let project = projects.find(project => project._id === id);
        if (project) {
            // project is already available, we don''t need to fetch it again
            return Observable.empty();
        }

        return this.projectsService.fetchBy(id);
    })
    .map(payload => {type: ProjectActions.ADD_PROJECT, payload});
}

projects.reducer.ts

export interface ProjectsState {
    all: Project[];
    byId: {[key: string]: Project};
}

const initialState = {
    all: [],
    byId: {}
};

export const projects: ActionReducer<ProjectsState> = (state: ProjectsState  = initialState, action: Action) => {
  switch (action.type) {
    case ADD_PROJECTS:
      const all: Project[] = action.payload.slice();
      const byId: {[key: string]: Project} = {};
      all.forEach(project => byId[project._id] = project);

      return {all, byId};
    case ADD_PROJECT:
        const newState: ProjectState = {
            all: state.slice(),
            byId: Object.assing({}, state.byId)
        };
        const project: Project = action.payload;
        const idx: number = newState.all.findIndex(p => p._id === project._id);
        if (idx >= 0) {
            newState.all.splice(idx, 1, project);
        } else {
            newState.all.push(project);
        }
        newState.byId[project._id] = project;

        return newState;
    default:
      return state;
  }
};

Como puede ver, este podría ser un poco más de código, pero solo en lugares centrales, donde el código se puede reutilizar fácilmente: los componentes se volvieron mucho más sencillos.

En una aplicación ideal, también tendría una capa adicional para ProjectsComponent y ProjectOneComponent , algo así como ProjectsRouteComponent y SingleProjectRoute , que contendría solo una plantilla como esta: <projectOne project="project$ | async"></projectOne> esto liberaría la ProjectOneComponent de cualquier conocimiento de la tienda o cualquier otra cosa, y solo contendría una entrada simple:

@Component({
  selector: ''projectOne'',
  templateUrl: ''./projectOne.html''
})
export class ProjectOneComponent implements OnInit {
    @Input("project")
    project: Project;
}