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

快速回答：你做不到。

如你所说，dispatch是异步的。

您应该使用@ngrx/effects。它与使用addAuthorAction几乎相同，只是它不是调用函数，而是“捕获”调度的操作，并在它们被reducers应用之后执行某些操作。

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

FETCH_USER仅用于切换布尔值，因此我可以在获取用户时显示微调器
我从效果中捕获此操作并发出http请求以获取用户
如果http响应正常并且我有我要查找的信息，我会从效果FETCH_USER_SUCCESS发送响应作为有效负载，否则我发送FETCH_USER_ERROR并切换布尔值为false（所以我们可以尝试再次取他）。

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

Answer 2

使用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

Answer 3

经过测试

"@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 4

由于调度是异步的（即开即用），因此我们可以订阅返回的可观察对象，一旦获得可观察对象，就可以执行下一条语句。

addAuthor() {
    this.store.dispatch(addAuthorAction(this.fg.value))
    .subscribe(() => {
        console.log('2')
    });           
}

或者，

myObservableObject$: Observable<any>;
this.myObservableObject$ = this.store.dispatch(addAuthorAction(this.fg.value));
this.myObservableObject$.subscribe((response) => {
    console.log('2')
});

以上是每个ngxs状态管理框架的内容。更多@ https://www.ngxs.io/advanced/actions-life-cycle#asynchronous-actions

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

4 个答案: