ngrx/effects库的目的是什么？

Question

我没有找到任何关于这个库的有用信息，或者它的目的是什么。 看起来像ngrx/effects向已经知道这个概念的开发者解释这个库，并给出了一个关于如何编码的重要示例。

我的问题：

1. 什么是行动的来源？
2. ngrx/effects库的目的是什么;仅使用ngrx/store有什么缺点？
3. 什么时候推荐使用？
4. 它支持角度rc 5+吗？我们如何在rc 5+中配置它？

谢谢！

Answer 1

主题太宽。它将像一个教程。我会试一试。在正常情况下，你会有行动，减速器和商店。行为由存储器分发，由reducer订阅，然后reducer对行为进行操作，形成一个新状态。对于教程，所有状态都在前端，但在真实应用程序中，它需要调用后端数据库或MQ等，这些调用具有副作用，以将这些效果分解到一个共同的地方，即用于的框架。

假设要将人员记录保存到数据库action: Action = {type: SAVE_PERSON, payload: person}。通常组件不会直接调用this.store.dispatch({type: SAVE_PERSON, payload: person})让Reducer调用HTTP服务，而是调用this.personService.save(person).subscribe(res => this.store.dispatch({type: SAVE_PERSON_OK, payload: res.json}))。如果考虑现实生活中的错误处理，组件逻辑将变得更加复杂。为了避免这种情况，只要从组件中调用 this.store.dispatch({type: SAVE_PERSON, payload: person})就会很好。

这是效果库来的。它就像减速器前面的JEE servlet过滤器一样。它匹配ACTION类型（过滤器可以匹配java世界中的URL），然后对其执行操作，最后返回一个不同的动作，或者不执行动作或多个动作，然后减少对效果输出动作的响应。

继续以往的例子，在特效库方式：

@Effects() savePerson$ = this.stateUpdates$.whenAction(SAVE_PERSON) 
    .map<Person>(toPayload) 
    .switchMap(person => this.personService.save(person)) 
    .map(res => {type: SAVE_PERSON_OK, payload: res.json}) 
    .catch(e => {type: SAVE_PERSON_ERR, payload: err}) 

的编织逻辑集中到所有影响和减缩类。它可以很容易地变得更加复杂，同时这种设计使得其他部件更加简单并且更加可重用。

例如，如果UI具有自动保存和手动保存，为了避免不必要的保存，UI自动保存部分可以由定时器触发，手动部分由用户点击触发，两者都在效果拦截器中调度SAVE_CLIENT动作，它可以是：

@Effects() savePerson$ = this.stateUpdates$.whenAction(SAVE_PERSON) 
    .debounce(300).map<Person>(toPayload) 
    .distinctUntilChanged(...) 
    .switchMap(see above) 
    // at least 300 milliseconds and changed to make a save, otherwise no save 

呼叫

...switchMap(person => this.personService.save(person)) 
    .map(res => {type: SAVE_PERSON_OK, payload: res.json}) 
    .catch(e => Observable.of({type: SAVE_PERSON_ERR, payload: err})) 

只有当出现错误工作一次。错误被抛出后，流已经死了，因为catch会尝试外部流。该电话应为

...switchMap(person => this.personService.save(person).map(res => {type: SAVE_PERSON_OK, payload: res.json}) 
    .catch(e => Observable.of({type: SAVE_PERSON_ERR, payload: err}))) 

;或者另一种方式：将所有ServiceClasses服务方法更改为返回ServiceResponse，其中包含服务器端的错误代码，错误消息和封装的响应对象，即

export class ServiceResult {  
    error:  string;  
    data:  any; 

    hasError(): boolean { 
     return error != undefined && error != null; } 

    static ok(data: any): ServiceResult { 
     let ret = new ServiceResult(); 
     ret.data = data; 
     return ret;  
    } 

    static err(info: any): ServiceResult { 
     let ret = new ServiceResult(); 
     ret.error = JSON.stringify(info); 
     return ret;  
    } 
} 

@Injectable() 
export class PersonService { 
    constructor(private http: Http) {} 
    savePerson(p: Person): Observable<ServiceResult> { 
     return http.post(url, JSON.stringify(p)).map(ServiceResult.ok); 
       .catch(ServiceResult.err); 
    } 
} 

@Injectable() 
export class PersonEffects { 
    constructor(
    private update$: StateUpdates<AppState>, 
    private personActions: PersonActions, 
    private svc: PersonService 
){ 
    } 

@Effects() savePerson$ = this.stateUpdates$.whenAction(PersonActions.SAVE_PERSON) 
    .map<Person>(toPayload) 
    .switchMap(person => this.personService.save(person)) 
    .map(res => { 
     if (res.hasError()) { 
      return personActions.saveErrAction(res.error); 
     } else { 
      return personActions.saveOkAction(res.data); 
     } 
    }); 

@Injectable() 
export class PersonActions { 
    static SAVE_OK_ACTION = "Save OK"; 
    saveOkAction(p: Person): Action { 
     return {type: PersonActions.SAVE_OK_ACTION, 
       payload: p}; 
    } 

    ... ... 
} 

一个修正我之前的评论：影响-Class和减速级，如果你有两个作用级和减速级的反应相同的动作类型，减速级将首先反应，然后再影响-类。这里是一个例子： 一个组件有一个按钮，一旦点击，调用：this.store.dispatch(this.clientActions.effectChain(1));将由effectChainReducer处理，然后ClientEffects.chainEffects$，这会将有效负载从1增加到2;等待500毫秒发射另一个动作：this.clientActions.effectChain(2)，通过与effectChainReducer有效载荷= 2，然后ClientEffects.chainEffects$，它从2增加到3，发射this.clientActions.effectChain(3)，...，直到其大于10，ClientEffects.chainEffects$发射this.clientActions.endEffectChain()，这改变后处理通过effectChainReducer将商店状态改为1000，最后停在这里。

export interface AppState { 
     ... ... 

     chainLevel:  number; 
    } 

    // In NgModule decorator 
    @NgModule({ 
     imports: [..., 
      StoreModule.provideStore({ 
       ... ... 
       chainLevel: effectChainReducer 
       }, ...], 
     ... 
     providers: [... runEffects(ClientEffects) ], 
     ... 
    }) 
    export class AppModule {} 


    export class ClientActions { 
     ... ... 
     static EFFECT_CHAIN = "Chain Effect"; 
     effectChain(idx: number): Action { 
     return { 
       type: ClientActions.EFFECT_CHAIN, 
       payload: idx 
     }; 
     } 

     static END_EFFECT_CHAIN = "End Chain Effect"; 
     endEffectChain(): Action { 
     return { 
      type: ClientActions.END_EFFECT_CHAIN, 
     }; 
     } 

    static RESET_EFFECT_CHAIN = "Reset Chain Effect"; 
    resetEffectChain(idx: number = 0): Action { 
    return { 
     type: ClientActions.RESET_EFFECT_CHAIN, 
     payload: idx 
    }; 

    } 

    export class ClientEffects { 
     ... ... 
     @Effect() 
     chainEffects$ = this.update$.whenAction(ClientActions.EFFECT_CHAIN) 
     .map<number>(toPayload) 
     .map(l => { 
      console.log(`effect chain are at level: ${l}`) 
      return l + 1; 
     }) 
     .delay(500) 
     .map(l => { 
      if (l > 10) { 
      return this.clientActions.endEffectChain(); 
      } else { 
      return this.clientActions.effectChain(l); 
      } 
     }); 
    } 

    // client-reducer.ts file 
    export const effectChainReducer = (state: any = 0, {type, payload}) => { 
     switch (type) { 
     case ClientActions.EFFECT_CHAIN: 
      console.log("reducer chain are at level: " + payload); 
      return payload; 
     case ClientActions.RESET_EFFECT_CHAIN: 
      console.log("reset chain level to: " + payload); 
      return payload; 
     case ClientActions.END_EFFECT_CHAIN: 
      return 1000; 
     default: 
      return state; 
     } 
    } 

使上面的代码运行时，输出应为：

输出应看起来像：

客户reducer.ts：51减速器链是在级别：1
客户effects.ts：72效应链是在级别：1
客户reducer.ts：51减速器链是在级别：2
客户effects.ts：72效应链是在级别：2
客户reducer.ts：51减速器链是在级别：3
客户effects.ts：72效应链是在级别：3
......
客户reducer.ts：51减速链是在等级：10
客户effects.ts：72效应链处于水平：10

它表示减速器第一运行效果之前，影响级是一个拦截后，没有预先拦截。请参阅流程图：