angular - 在 NGRX 上的 ActionsSubject 订阅上使用操作的有效负载

Question

我得到了旧的和坏的Property 'payload' does not exist on type 'Action做这个动作订阅：

由于是创建操作，我需要有效负载来签出userId最近创建的用户并导航到/users/userId

顺便说一句：我正在关注这个非常好的教程

@Component({
  selector: 'app-sample',
  templateUrl: 'sample.html',
})
export class AppComponent {
  subs = new Subscription();

  constructor(private actionsSubject: ActionsSubject) {
    this.subs = actionsSubject.subscribe(action => {
      if (action.type === actions.CREATE_USER_SUCCESS) {
        console.log(action.payload);
      }
    });
  }
}

Answer 1

如果你看一下 ActionsSubject 类声明，你会注意到当你订阅它时，你应该得到 class 的对象Action，定义如下：

export interface Action {
  type: string;
}

如您所见，这里根本没有payload。这意味着你需要告诉 TypeScript，如果你期望某个对象的类型更严格。

我会尝试（假设您的 Action 类名为 CreateUserSuccessAction）：

this.subs = actionsSubject.subscribe((action: Action) => {
  if (action.type === actions.CREATE_USER_SUCCESS) {
    let createUserAction: CreateUserSuccessAction = action as CreateUserSuccessAction;  
    console.log(action.payload);
  }
});

或更好（假设您使用 RxJS 6）：

this.subs = actionsSubject.pipe(
  filter((action: Action) => action.type === actions.CREATE_USER_SUCCESS)
).subscribe((action: CreateUserSuccessAction) => {
  console.log(action.payload);
});

希望有帮助！