Question

我正在使用@ ngrx / store和@ ngrx / effects制作Angular 2应用。

我正在努力理解将逻辑置于行动/效果等之外以及在何处调用服务功能。

例如，使用身份验证......

当用户点击登录时，会以登录凭据作为有效负载调度AUTH_REQUEST操作。
效果会查找此操作并调用API。
成功的结果使用响应对象中的令牌，用户名等调用AUTH_SUCCESS操作作为有效负载，转到reducer以更新AuthState。

例如：在AuthEffects

@Effect() authenticate$ = this.updates$
.whenAction(AuthActions.AUTHENTICATE_REQUEST)
.switchMap(update => this.api.post('/authenticate', update.action.payload)
  .map((res:any) => ({type: AuthActions.AUTHENTICATE_SUCCESS, payload: res.json()}))
  .catch((err:any) => Observable.of({ type: AuthActions.AUTHENTICATE_ERROR, payload: err }))
);

在AuthReducer

 case AuthActions.AUTHENTICATE_SUCCESS:
  return Object.assign({}, state, <AuthState>{
    processing: false,
    failed: false,
    isLoggedIn: true,
    token: action.payload.token,
    username: action.payload.username,
    accountId: action.payload.accountId,
  });

我想知道的是：

处理AUTH_SUCCESS操作后，在何处调用路由器更改页面。我是从效果反应链中做到这一点还是...... ??
我有AuthService需要在LocalStorage中存储凭据（令牌等）。我应该把它叫做＆＃34;存储令牌＆＃34;即authService.store(userCredentials)。

任何帮助表示赞赏。

Answer 1

还有一个处理这些类型功能的ngrx“官方”库@ngrx/router-store。现在，@ ngrx / router被弃用，转而支持@ angular / router 3.0.0（现在在RC1中），如their migration guide所示。因此，路由器存储也正在发生变化，迁移到角度路由器，并且有一个pending PR寻址。当一切都有希望得到解决时，路由器商店提供了一个动作创建器用于导航目的，非常方便从效果返回：

// ...
import { Effect, toPayload, StateUpdates } from '@ngrx/effects';
import { go } from '@ngrx/router-store';

// ... in custom effects class

@Effect() loginSuccess$: Observable<Action> = this.updates$
  .whenAction(LoginActions.LOGIN_SUCCEEDED)
  .map<ActionPayloads.LoginSucceeded>(toPayload)
  .do(successPayload => {
    // grab auth information you need to store
    // and save them now, accessing your local storage service

    const { authInfo, rememberMe } = successPayload;

    this.authStorage.save(authInfo, rememberMe);
  })
  .map(_ => go(homeRoutePath));

现在它似乎不起作用，但一旦路由器存储更新就应该恢复。 HTH

Answer 2

我这样做：

import { go } from '@ngrx/router-store';
...

@Injectable()
export class AuthEffects {

  constructor(
    private actions$: Actions,
    private authService: AuthService
  ) { }

  @Effect() loginSuccess$: Observable<Action> = this.actions$
    .ofType(auth.ActionTypes.LOGIN_SUCCESS)
    .map((action) => action.payload as AuthUser)
    .do((user: AuthUser) => console.info('welcome ' + user.name))
    .map(() => go(['/welcome']));

}

根据需要在最终操作之前调用其他操作/效果。当然，此示例使用'@ngrx/router-store'。

阅读官方报告中的惊人example-app代码。

Angular2 @ ngrx / store / effects - 在哪里调用服务函数

2 个答案: