Angular 如何使用ngrx和effects订阅操作成功回调
我正在尝试做一件简单的事情——在使用http请求保存某个实体之后 我想导航回列表路线。问题是:如何订阅成功的行动或可能是减少或影响 这是我的行动代码:Angular 如何使用ngrx和effects订阅操作成功回调,angular,ngrx,Angular,Ngrx,我正在尝试做一件简单的事情——在使用http请求保存某个实体之后 我想导航回列表路线。问题是:如何订阅成功的行动或可能是减少或影响 这是我的行动代码: static SAVE_POST = '[POST] Save POST'; savePOST(Post): Action { return { type: PostActions.SAVE_POST, payload: Post }; } static SAVE_POST_SUCCESS = '
static SAVE_POST = '[POST] Save POST';
savePOST(Post): Action {
return {
type: PostActions.SAVE_POST,
payload: Post
};
}
static SAVE_POST_SUCCESS = '[POST] Save POST Success';
savePOSTSuccess(Post): Action {
console.log('action: savePostSuccess')
return {
type: PostActions.SAVE_POST_SUCCESS,
payload:Post
};
}
我正在使用特效:
@Effect() savePost$ = this.update$
.ofType(PostActions.SAVE_POST)
.map(action => action.payload)
.switchMap(post => this.svc.savePost(post))
.map(post => this.postActions.savePOSTSuccess(post));
减速器:
const initialState: PostListState = [];
export default function (state = initialState, action: Action): PostListState {
switch (action.type) {
case PostActions.LOAD_POST_SUCCESS: {
return action.payload;
}
case PostActions.SAVE_POST_SUCCESS: {
console.log('SavePOST SUCCESS',action.payload)
let index = _.findIndex(state, {_id: action.payload._id});
if (index >= 0) {
return [
...state.slice(0, index),
action.payload,
...state.slice(index + 1)
];
}
return state;
}
default: {
return state;
}
}
}
在我的组件中,我想订阅成功回调:
handlePostUpdated($event) {
this.post = this.code;
let _post: Post = Object.assign({}, { _id: this.id, name: this.name, text: this.post });
this.store.dispatch(this.postActions.savePOST(_post)); //not have "subscribe" method
}
感谢您的帮助您需要一个选择器来为您提供最新的帖子 this.latestPost$=this.store.selectfromRoot.getPost 然后你可以订阅这个.latestPost$observable,并重定向到你的新路由,假设你已经声明latestPost$:observable;在您的组件中
有关更多详细信息,请参阅此示例应用程序。您也可以订阅组件中的操作:
[...]
import { Actions } from '@ngrx/effects';
[...]
@Component(...)
class SomeComponent implements OnDestroy {
destroyed$ = new Subject<boolean>();
constructor(updates$: Actions) {
updates$.pipe(
ofType(PostActions.SAVE_POST_SUCCESS),
takeUntil(this.destroyed$)
)
.subscribe(() => {
/* hooray, success, show notification alert etc.. */
});
}
ngOnDestroy() {
this.destroyed$.next(true);
this.destroyed$.complete();
}
}
在savePOSTSuccess操作中,如果您还添加reducer函数代码并显示保存的帖子如何影响您的状态,则效果会更好 通常,您可以将编辑布尔属性置于post状态 在减速器上,可以将标志值设置为!通过将属性设置为false来编辑状态 然后,您可以在该属性上添加一个选择器,并根据该属性显示或隐藏表单。基于此:经过一些小的修改,因为自ngrx 4以来,不再有调度程序,而是ActionsObject: 从'@ngrx/store'导入{actionsObject}; 从@ngrx/effects导入{ofType}; subsc=新认购; 构造函数私有操作对象:操作对象。。。。{ this.subsc=this.actionsSubj.pipe 类型为“保存成功后” .subscribedata=>{ //做点什么。。。 }; } 恩戈德斯特罗{ 此.subsc.unsubscribe; }
当然。那是可能的。请考虑此示例,以保存已保存的联系人。
export class PageContactComponent implements OnInit, OnDestroy {
destroy$ = new Subject<boolean>();
constructor(private actionsListener$: ActionsSubject) {}
ngOnInit() {
this.actionsListener$
.pipe(ofType(ContactActionTypes.SAVE_SUCCESS))
.pipe(takeUntil(this.destroy$))
.subscribe((data: any) => {
// Do your stuff here
});
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
}
有棱角的,有棱角的。。。还有另一个插件,每次你需要一些不同的东西时都要包括进去…: 但在给定的情况下,似乎可以做到这一点而不产生任何影响。与@kuncevic dev提到的方法相同 this.store.selectstate=>state.companylicenseccestate.pipetakentilthis.destroy.subscribestate:companylicenses.state=>{ ... }; this.store.dispatchnew GetCompanyLicenceFilter.pipefinalize=>this.CompanyLicenceLoading=false,takeUntilthis.destroy.subscribe=>{ ... };
将完成此工作。您的意思是要向发布模型添加编辑属性吗?你说在那个属性上添加选择器是什么意思对不起,我是ngrx的新手……我知道还有其他方法可以做到,但这种方法对我来说很有效,我觉得有必要将其标记为答案。总有很多方法可以做,但如果你只是想以一个小通知的形式表明,保存是成功的,那么这种方法是最干净的,因为这是一次事件,不应该一直贯穿整个过程store@olsn这是一个很酷的方法。目前刚刚在我的应用程序中应用;我是否必须在构造函数中保存订阅才能在Ngondestory中取消订阅,以便在真实应用程序中释放内存?或者它将由函数takeUntil自动完成,直到它收到来自此的事件。destrocted$?destrocted$与takeUntil结合使用。。。是一种模式,它将自动取消订阅,这样您就不必跟踪订阅。使用actions$:actions执行此操作,然后键入“SAVE\u POST\u SUCCESS”执行此操作有什么不同吗?我注意到这种方法会更快地触发它,然后触发ActionSubject。这是否意味着只有在减速器运行后才会触发?AJT的答案将在新状态初始化之前运行,因此会出现数据不匹配,如何防止这种情况?从2018年8月起,这应该是公认的答案-公认的答案现在已弃用-使用更现代的答案approach@YehiaA.Salam,这正是它的名字,一个订阅。如果我们不取消订阅,就会出现内存泄漏,即可观察的actionSubject保持打开状态。它从来都不是它的一部分。它来自rxjs:从“rxjs”导入{Subscription}。文件::
export enum ContactActionTypes {
SAVE_SUCCESS = "[Contact] Save Success",
}
export class ActionContactSaveSuccess implements Action {
readonly type = ContactActionTypes.SAVE_SUCCESS;
constructor(readonly payload: { contact: any }) {}
}
export type ContactActions = ActionContactSaveSuccess;