通过NGRX显示成功,错误消息的正确方法

Question

我知道这个问题的两个解决方案,第一个是将消息保持在你看不好的状态,第二个是订阅ActionSubject我当前用来显示消息的消息.

还有其他解决方案吗？另外如何在模板中设置CSS类,而不是在组件中？

这是我的例子:

 this.actionSubject.subscribe(action => {
      if (action.type === fromActions.LOGIN_SUCCESS) {
        this.message$ = action.payload.message;
        this.messageClass = 'alert alert-success';
      }
      if (action.type === fromActions.LOGIN_FAILURE) {
        this.message$ = action.payload.error.message;
        this.messageClass = 'alert alert-danger';
        this.LoginForm.reset();
      }
    })

这似乎太长了,而不是DRY,我应该在我期望收到消息的每个组件中都这样做.

Answer 1

原始码头的示例https://github.com/ngrx/effects/blob/master/docs/intro.md

创建一个描述登录操作源的 AuthEffects 服务：

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Actions, Effect } from '@ngrx/effects';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class AuthEffects {
  constructor(
    private http: Http,
    private actions$: Actions
  ) { }

  @Effect() login$ = this.actions$
      // Listen for the 'LOGIN' action
      .ofType('LOGIN')
      // Map the payload into JSON to use as the request body
      .map(action => JSON.stringify(action.payload))
      .switchMap(payload => this.http.post('/auth', payload)
        // If successful, dispatch success action with result
        .map(res => ({ type: 'LOGIN_SUCCESS', payload: res.json() }))
        // If request fails, dispatch failed action
        .catch(() => Observable.of({ type: 'LOGIN_FAILED' }))
      );
}

通过 EffectsModule.run 提供您的服务以自动启动您的效果：

import { EffectsModule } from '@ngrx/effects';
import { AuthEffects } from './effects/auth';

@NgModule({
  imports: [
    EffectsModule.run(AuthEffects)
  ]
})
export class AppModule { }

注意：对于依赖于要引导的应用程序的效果（即依赖于路由器的效果），请使用 EffectsModule.runAfterBootstrap。请注意，runAfterBootstrap 只能在根模块中工作。

否则，您可以在此处查看使用有效的防护：https ://toddmotto.com/preloading-ngrx-store-route-guards