在使用ngrx时完成调度后执行代码

Question

在我的示例Angular 2应用程序中,我使用ngrx/store和ngrx/effects进行状态管理.

下面是组件中添加新项目的功能之一.

addAuthor() {

    this.store.dispatch(addAuthorAction(this.fg.value));
    console.log('2')        
} 

在上面的代码"this.store.dispatch(addAuthorAction(this.fg.value));"中 负责向服务器进行AJAX调用并向数据库添加新作者,这很好.

因为"this.store.dispatch(addAuthorAction(this.fg.value));" 是一个异步操作,即使在AJAX调用完成之前,也会执行console.log("2")语句.

我的问题是,需要修改什么才能在store.dispatch完成后执行console.log.

Answer 1

测试过

"@ngrx/core": "^1.2.0",
"@ngrx/effects": "^7.4.0",
"@ngrx/router-store": "^7.4.0",
"@ngrx/store": "^7.4.0",
"@ngrx/store-devtools": "^7.4.0",

这也将起作用：

import { ofType, Actions } from '@ngrx/effects';

// Constructor
constructor(
   private _actions$: Actions,
   private _store: Store<any>,
) { }

// YOUR METHOD    
this._store.dispatch(<ACTION>);
this._actions$.pipe(ofType(<ACTION_NAME>)).subscribe((data: any) => {
  console.log(data);  // returned state data        
})

Answer 2

快速回答:你做不到.

如你所说,dispatch是异步的.

你应该做的是使用@ngrx/effects.它与使用几乎相同,addAuthorAction只是它不是调用函数,而是"捕获"调度的操作,并在减速器应用之后执行某些操作.

所以我希望我一般来说,就是我将我的行动分成3个,例如: - FETCH_USER - FETCH_USER_SUCCESS -FETCH_USER_ERROR

• FETCH_USER 仅用于切换布尔值,以便我可以在获取用户时显示微调器

• 我从效果中捕获此操作并发出http请求以获取用户

• 如果http响应是正确的,我有我正在寻找的信息,我从FETCH_USER_SUCCESS响应中发送效果作为有效负载,否则我发送FETCH_USER_ERROR并将布尔值切换为false(所以我们可以尝试再次取回他) .

因此,在您的示例中,如果您想要console.log在FETCH_USER_SUCCESS之后使用某些内容,只需使用另一种效果来捕获FETCH_USER_SUCCESS并执行您想要的操作.

Answer 3

使用ngrx，您可以收听以下操作：

constructor(private actionsSubject$: ActionsSubject, private store: Store<AppState>) {}

ngOnInit() {
  this.actionsSubject$.pipe(
    takeUntil(this.unsubscribe$), // optional
    filter((action) => action.type === SimsActionTypes.SimEditedSuccess)
  ).subscribe(({payload}) => {
    console.log(payload)
  )
}

调度FIRST_ACTION时，请使用效果进行HTTP请求。实际上，当您返回响应时，请以响应为有效负载触发SECOND_ACTION。然后，只需在控制器.ts文件中监听SECOND_ACTION