ngrx/effects 库的用途是什么？

Question

我没有找到关于这个库的任何有用信息或者它的用途是什么。似乎 ngrx/effects 向已经知道这个概念的开发人员解释这个库，并给出一个关于如何编码的更重要的例子。

我的问题：

什么是行动来源？
ngrx/effects 库的用途是什么；仅使用 ngrx/store 的缺点是什么？
建议什么时候使用？
它支持angular rc 5+吗？我们如何在 rc 5+ 中配置它？

谢谢！

Answer 1

话题太宽泛了。它将像一个教程。无论如何我都会试一试。在正常情况下，您将有一个 action、reducer 和一个 store。动作由 store 调度，由 reducer 订阅。然后减速器作用于动作，并形成一个新的状态。示例中，所有状态都在前端，但在真正的应用程序中，需要调用后端DB或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} ) 来自您的组件。

这就是效果库的用途。它就像 reducer 前面的 JEE servlet 过滤器。它匹配ACTION类型（filter可以匹配java world中的urls）然后作用于它，最后returns一个不同的动作，或者没有动作，或者多个动作。然后reducer响应effects的输出动作。

继续前面的示例，使用效果库：

@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} )

编织逻辑集中在所有效果器和减速器中 classes。它很容易变得更复杂，同时这种设计使其他部分更简单，更可重用。

比如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}) ) )

或另一种方式：将所有 ServiceClass 服务方法更改为 return 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};
    }

    ... ...
}

对我之前评论的一个更正：Effect-Class 和 Reducer-Class，如果你有 Effect-class 和 Reducer-class 对同样的动作类型，Reducer-class会先做出反应，然后是Effect-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;
      }
    }

如果你运行上面的代码，输出应该是这样的：

client-reducer.ts:51 reducer chain are at level: 1
client-effects.ts:72 effect chain are at level: 1
client-reducer.ts:51 reducer chain are at level: 2
client-effects.ts:72 effect chain are at level: 2
client-reducer.ts:51 reducer chain are at level: 3
client-effects.ts:72 effect chain are at level: 3
... ...
client-reducer.ts:51 reducer chain are at level: 10
client-effects.ts:72 effect chain are at level: 10

表示reducer 运行s first before effects, Effect-Class是一个post-interceptor，不是pre-interceptor。见流程图：

ngrx/effects 库的用途是什么？

What is the purpose of ngrx/effects library?

javascript

typescript

redux

ngrx

angular