Angular2 ngrx / store有多次登录尝试

时间:2016-02-22 21:43:29

标签: angular rxjs ngrx

通过查看几个ngrx示例(https://github.com/SekibOmazic/ngrx-auth-example)和(https://github.com/ngrx/angular2-store-example),他们都创建了对商店的订阅,然后进行REST API调用。

我已经修改了他们的两个代码以返回错误,但订阅仍然保持完好(例如,在尝试登录时返回404)。我可以在控制台中看到错误,但我可以再次登录。

在我的代码中,我有一个几乎相同的设置,但失败的登录响应会导致我的订阅失败(尽我所知)。

为了让4XX错误响应代码不会导致我的订阅失败,我需要什么魔力?

private actions$ = new BehaviorSubject<Action>({ type: actions.INIT, payload: null })

constructor(
  public http: Http,
  private store: Store<AppStore>
) {
  let logins = this.actions$
    .filter(action => { debug('ACTION', action); return action.type === actions.LOGIN_USER })
    .do(() => { debug('DISPATCH'); this.store.dispatch({ type: actions.LOGIN_REQUEST }) })
    .mergeMap(action => this.http.post('/auth/login', JSON.stringify(action.payload)))
    .share();

  let loginSuccess$ = logins
    .filter((payload: IResponse) => payload.data.token !== null)
    .map((payload: IResponse) => ({ type: actions.USER_AUTHENTICATED, payload: payload.data }));

  let loginFailure$ = logins
    .filter((payload: IResponse) => payload.data.token === null)
    .map((payload: IResponse) => ({ type: actions.LOGIN_FAILURE, payload: payload.data }));

  Observable
    .merge(loginSuccess$, loginFailure$)
    .subscribe((action: Action) => this.store.dispatch(action))
}

login(payload: ILogin) {
  this.actions$.next({ type: actions.LOGIN_USER, payload });
}

1 个答案:

答案 0 :(得分:3)

这更多地与RxJS本身有关,而不是与ngrx相关。错误将结束流,除非您a)在.subscribe(next,err)处理程序中处理它,或使用.catch()运算符或类似的。

例如

let loginFailures$ = http.get('failurl')
  .map(res => res.json())
  //handle error with catch
  .catch(err => {
    //return a 'fixed' observable
    return Observable.of({ type: actions.LOGIN_FAILURE, payload: err })
  })
  .subscribe(action => store.dispatch(action));