ngrx心得體會總結

一個典型的場景：添加店鋪商品，其中店鋪有多個，每個店鋪有不同的商品分類，商品分類可以多級！

@Injectable() export class AppEffects {// 添加店鋪商品@Effect()StartAddShopGoods$ = this.ofType(ActionTypes.StartAddShopGoods).pipe(takeUntil(this.ofType(ActionTypes.Error).pipe(tap(res => console.log('發生了點錯誤')))),switchMap(res => {// 加載店鋪this.store.dispatch(new SearchShop());this.router.navigate(['/select-shop'], { replaceUrl: false, skipLocationChange: true });// 添加選擇店鋪return this.ofType(ActionTypes.SelectShop).pipe(switchMap(res => {// 加載店鋪商品分類this.store.dispatch(new SearchShopGoodsCategory());this.router.navigate(['/select-shop-goods-category'], { replaceUrl: false, skipLocationChange: true });// 選擇店鋪商品分類return this.ofType(ActionTypes.SelectShopGoodsCateogry).pipe(tap(res => {// 商品信息this.router.navigate(['/shop-goods-edit'], { replaceUrl: false, skipLocationChange: true });}),switchMap(res => {// 點擊提交按鈕return this.ofType(ActionTypes.AddShopGoods).pipe(switchMap(res => this.util.wpost('iwe7ShopGoods', 'Upsert', {}).pipe(map(res => {// 添加成功this.router.navigate(['/user-center'], { replaceUrl: false, skipLocationChange: true });return new AddSuccessShopGoods();}))));}));}));}));// 公共加載@Effect()SearchShop$ = this.ofType(ActionTypes.SearchShop).pipe(switchMap(res => {return this.util.wpost('iwe7Shop', 'Loads', {}).pipe(pluck('data'),pluck('list'));}),map(res => {return new SearchSuccessShop(res);}));@Effect()SearchShopGoodsCategory$ = this.ofType(ActionTypes.SearchShopGoodsCategory).pipe(switchMap(res => {return this.util.wpost('iwe7ShopGoodsCategory', 'Loads', {}).pipe(pluck('data'),pluck('list'));}),map(res => {return new SearchSuccessShopGoodsCategory(res);}));constructor(private actions$: Actions,private store: Store<any>,private util: Iwe7Util2Service,private router: Router) { }ofType<T extends Action>(name: string): Actions<T> {return this.actions$.ofType<T>(name);} }復制代碼

總結： actions 定義操作 effects 串聯actions,完成業務邏輯 reducers 操作Store model 定義結構

總結

以上是生活随笔為你收集整理的ngrx心得体会总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。