NgRx Effect使用有效载荷数组中的数据调用服务后调度多个事件

时间:2018-06-27 10:11:09

标签: angular typescript rxjs ngrx ngrx-effects

我有一个用户列表,我需要获取每个用户的角色。

因此,我有一个操作LoadUserRole,它需要一个用户数组:

export class LoadUserRole implements Action {
  readonly type = UsersActionTypes.LoadUserRole;

  constructor(public payload: Array<User>) {}
}


export class LoadUserRoleSuccess implements Action {
  readonly type = UsersActionTypes.LoadUserRoleSuccess;

  constructor(public payload: { user: Update<User> }) {}
}

我正在使用NgRx效果来处理调用服务的副作用:

 // Side Effect of the load users action
  @Effect()
  loadUserRole$ = this.actions$.pipe(
    ofType(UsersActionTypes.LoadUserRole),
    map((action: LoadUserRole) => action.payload),
    filter(users => users.length !== 0),
    map((users: User[]) => users.map((user: User) => user.id)),
    concatMap((ids: string[]) => ids.map((id: string) =>
        this.accountService
          .getAccountRole(id)
          .pipe(
            map((asset: any) => new LoadUserRoleSuccess({
              user: {
                id: asset.items[0].userId,
                changes: {
                  roleType: asset.items[0].roleType
                }
              }
            })),
            catchError(error => {
              return of(new LoadUserRoleFailure(error.message));
            })
          )
        )
      )
  );

根据NgRx实体的实体适配器,赋予LoadUserRoleSuccess的对象的类型为Update。因此,LoadUserRoleSuccess会更新状态下的用户,这在我与一个用户进行测试时可以正常工作。

但是这段代码给了我错误:

ERROR Error: Effect "UsersEffects.loadUserRole$" dispatched an invalid action: [object Object]

ERROR TypeError: Actions must have a type property

帐户服务可以很好地一次记录每个ID,但是由于某种原因,成功调度无法正常进行,服务中也没有对后端的调用。

处理这种情况的最佳方法是什么?

这是我的减速器功能:

case UsersActionTypes.LoadUserRole: {
  return {
    ...state,
    pending: true,
  };
}

case UsersActionTypes.LoadUserRoleSuccess: {
  return usersAdapter.updateOne(action.payload.user, {
    ...state,
    pending: false,
  });
}

1 个答案:

答案 0 :(得分:0)

由于您在那里使用地图,请尝试以下操作:


 map((asset: any) => of(new LoadUserRoleSuccess({
              user: {
                id: asset.items[0].userId,
                changes: {
                  roleType: asset.items[0].roleType
                }
              }
            }))),

of将确保它以可观察的形式而不是对象的形式返回