redux 使用ngrx时,在分派完成后执行程式码

dddzy1tm  于 2022-11-24  发布在  其他
关注(0)|答案(5)|浏览(134)

在我的示例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));async操作,因此console.log("2")语句甚至在 AJAX 调用完成之前就已执行。
我的问题是,需要修改什么,以便在store.dispatch完成后执行console.log。

xfb7svmp

xfb7svmp1#

快回答:你不能这样
正如您所说,dispatch是异步的。
你应该使用@ngrx/effects,它和addAuthorAction几乎一样,只是不是调用函数,而是“捕捉”被调度的动作,并在它们被reducer应用后立即执行一些操作。
所以我一般会把我的行动分成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并在这里做你想做的事情。

aelbi1ox

aelbi1ox2#

测试工具

"@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        
})
uqxowvwt

uqxowvwt3#

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

hgc7kmma

hgc7kmma4#

今天我有类似的问题,我用tap()来解决这个问题。你什么时候从“rxjs/operators”导入效果tap

import { tap } from "rxjs/operators";

然后在SuccessAction上执行Map操作后在switchMap中使用它

this.service.save(option).pipe(
                map((result) => action.saveSuccess({ option: option})),
                tap(() => this.router.navigate(['link'])),
                catchError((error) => of(actions.saveError({ error }))

这个密码对我有效

jdg4fx2g

jdg4fx2g5#

由于分派是异步的(即触发后忽略),我们可以订阅返回的可观察对象,然后在获得可观察对象后执行下一条语句。

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

相关问题