Angular 2 ngrx：多个 reducer 与一个 http 请求？

Question

在我的 Angular 2 应用程序中，我正在尝试实施 ngrx，所以我的组件之一中有以下代码：

OnInit() {
 this.myService.getApplicationList();
}

那个服务 return 这个 json :

{
 Count : 25, // count of all applications
 Applications[Array] // array with applications objects in it
 Categories[Array] // array of categories
}

如何在仅发出一个请求的情况下将计数、应用程序和类别分配给各自的减速器？

我现在正在做的是将响应对象映射到 response.json()。然后是应用程序。

Myservice.ts

 getApplicationList(limit: number) {
    return this.http.get(this.baseUrl)
    .map(res => res.json().Applications )
    .map(payload => ({ type: 'GET_APP', payload : payload }))
    .subscribe(action => {
        this.store.dispatch(action)});
}

为了获取类别，我正在执行与之前相同的请求：

    getApplicationList(limit: number) {
    return this.http.get(this.baseUrl)
    .map(res => res.json().Categories)
    .map(payload => ({ type: 'GET_CATEGORIES', payload : payload }))
    .subscribe(action => {
        this.store.dispatch(action)});
}

我如何简化这种重复并仅使用一个 http 请求来映射我的 Applicaitons 和 Categories 数组？

Answer 1

您可以在订阅功能中同时处理。

getApplicationList(limit: number) {
    return this.http.get(this.baseUrl)
    .map(res => res.json())
    .subscribe(res => {
        this.store.dispatch({ type: 'GET_CATEGORIES', payload : res.Categories });
        this.store.dispatch({ type: 'GET_APP', payload : res.Applications });
    });
}

Answer 2

我认为更正确的方法是使用 ngrx @Effect (https://github.com/ngrx/effects);

使用两个属性设置名为 AppState 的状态；类别和应用。
创建一个类似 'LOAD_APP' 的动作，效果应该监听该动作，一旦触发，将触发 http 请求，然后派发一个名为 LOAD_APP_SUCCESS 的动作，并以有效负载作为响应，然后存储然后将负载分别存储在 Store AppState 道具中。

Angular 2 ngrx：多个 reducer 与一个 http 请求？

Angular 2 ngrx : multiple reducer with one http request?

rxjs

redux

ngrx

angular