ngrx心得体会总结

本文通过具体场景展示了如何使用ngrx实现电商应用中的商品管理流程,包括添加店铺、选择商品分类及编辑商品信息等环节。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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 定义结构

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值