我目前正在使用Redux(ngrx)和RxJS(主要用于学习目的)构建Angular 2应用,但它仍然有点(说至少)让我感到困惑。Angular 2使用ngrx + RxJS订阅多个组件/路由来填充商店
我试图实现一个“/项目”的路线,以及一个“/项目/:ID”的路线。在这两种情况下,我的行为都是通过HTTP请求获取所需的数据。
目前,如果我导航到“项目”(通过导航的URL或ajax调用),它将从服务器获取所有15个左右的项目并将其添加到Redux上的“项目”存储中。现在,如果我现在尝试从一个特定的项目获得(来自浏览器的搜索栏 - >“本地主机:3000 /项目/ 2”,例如)只会取一个,这就是我想要的东西,并把它放在但是如果我从那里导航到“项目”部分,它将只打印位于商店中的一个项目。
我想要完成的任务如下:
- 如果我进入“/项目”,然后再取出,并把所有的结果在商店。
- 如果上述情况满足,我浏览到一个特定的项目从那里,使用链接标签,我想检查商店对于具有特定ID并返回该项目。
- 如果我从获得“/项目/:id为”直接,我只想获取特定项目,并将其放置在店内。
- 如果紧接着上述观点发生了,我希望能够浏览到“/项目”,通过我的菜单或其他任何链接,获取的所有项目,并更新我的“项目”存储所有的项目(不只是一个已经从先前的点)
- 存在,我可能会丢失尊重上述
我想做到这一点的一种高效,高性能和优雅的方式,任何其他逻辑方案。
我现在,我相信,至少从两个地方订阅了相同的Observable,我不认为这是正确的方法。最重要的是,我仍然没能得到我想要,如果我从一开始在:第一条路线,然后定位到“/项目”路线“/项目/ ID”。
这里的,我认为相关的代码:
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'])
});
}
}
*有些东西这里要注意:我正在订阅this.route.params,它订阅了另一个Observable,我是否需要将它平坦化?这个概念还是甘拜下风
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>
*在这里,我想作出这样我还使用projectsService笔记。项目$ |异步打印上我很积极也影响迭代的结果...
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 : '')
}
})
}
}
*我猜每次我称之为“findProjects时间“函数我正在订阅Observable。不好,是吧?
*另外,在该电流设置每当我直接进入“/项目/:ID”这似乎是两次执行fetchProjects功能(我想,备受控制台日志记录)。从本质上讲,内findProjects的this.projects $认购跳跃和获取与相应的ID项目,但随后再次进入并获取所有其他项目,最后它只是“消失”? 它为什么会自己调用,或者第二个调用来自哪里?
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;
}
};
*这是所有的减速有暂时因为我仍然超贴在休息。
不管怎么说,我要感谢大家提前。如果有什么不清楚或您需要更多信息,请告诉我。我知道这不仅涵盖了一件事,而且可能超级简单,或者根本没有,但是我非常渴望获得尽可能多的帮助,因为我真的被困在这里......再次感谢!
这看起来很神奇!非常感谢您花时间回复。让我看看它并按原样进行测试或修改它,如果对此有任何疑问,我会通知您。我很想将你的答案标记为正确的,因为这看起来像我正在寻找的东西(我还会检查**效果**),但让我稍微玩一下吧,了解这些变化。 – deathandtaxes