• [Angular2] @Ngrx/store and @Ngrx/effects learning note


    Just sharing the learning experience related to @ngrx/store and @ngrx/effects.

    In my personal opinion, I fell there are tow different types of coding style by using 

    1. @ngrx/store only

    2. @ngrx/store + @ngrx/effects

    So How we do with only ngrx/store?

    Controller: 

     deleteItem(item: Item) {
        this.subs['deleteItem'] = this.itemsService.deleteItem(item)
          .subscribe(
            (res) => {
              console.log("Delete Item success", JSON.stringify(res, null, 2))
              this.resetItem();
            },
            (err) => alert("error")
          );
      }

    Service:

    export class ItemsService {
      items$: Observable<Item[]> = this.store.select('items');
    
      constructor(
        private http: Http,
        private store: Store<AppStore>,
        private actions: ItemsActions
      ) {}
      deleteItem(item: Item) {
        return this.http.delete(`${BASE_URL}${item.id}`)
          .do(action => this.store.dispatch({ type: DELETE_ITEM, payload: item }));
      }

    Reducer:

        case DELETE_ITEM:
          return state.filter(item => {
            return item[comparator] !== action.payload[comparator];
          });

    As you can see, the working flow is like that:

    1. Form controller we call the Service to delete the item
    2. Service do the http call to remove the item
    3. Then we have '.do()' method to create side effect, call dispatch 
    4. Since the return from Service is Observable, we subscribe form the controller.
    5. Inside successfully handler, we can do any other ui side effect.

    ngrx/store + ngrx/effects:

    Controller: 

      deleteWidget(widget: Widget) {
        this.store.dispatch({type: DELETE_WIDGET, payload: widget});
      }

    Service:

      deleteWidget(widget: Widget) {
        return this.http.delete(`${BASE_URL}${widget.id}`);
      }

    Effect:

      @Effect() delete$: Observable<Action> = this.actions$
        .ofType(DELETE_WIDGET)
        .map(action => action.payload)
        .switchMap((widget)=>{
          return this.widgetsService.deleteWidget(widget)
                    .map(success => console.log("success"))
                    .catch(() => of("error")) // catch expect to get an observable back
        });

    Reducer:

        case DELETE_WIDGET:
          return state.filter(widget => {
            return widget[comparator] !== action.payload[comparator];
          });

    So the work flow for ngrx/store + ngrx/effects:

    1. From the controller, we just dispatch the action.
    2. Effect listening the actions that dispatched, and trigger 'ofType' the same is dispatched action from controller.
    3. Inside effect, we call service to delete the widget.
    4. If http request is success, we actually can dispatch another UI action that will do the UI rendering.
    5. If http reuqest is faild, we catch it and you actually can dispatch another UI action that will show the error in UI.

    Github

    Summary:

    By using only ngrx/store, we are still using the coding style we get used to, like controller talking to the service, after service done its job, return back to controller, let controller do whatever necessary.

    By using ngrx/store + ngrx/effects, we are actullay walking into RxJS + Redux world, everything goes reactive, everything should have a reducer even it is UI rendering stuff.

    I am not sure which way is better. My point is I am using Redux partten, take advantage of RxJS to help me handle state management esailer. But I don't know to overkill, everything conver to Observable and reducers style is way to far from the starting point -- state management.

  • 相关阅读:
    nodejs express hi-cms
    写让别人能读懂的代码
    统计学和数据挖掘的关系
    假设检验
    相关性探索
    领域驱动设计分层类图
    未能加载文件或程序集 Ninject.Web.Common, Version=3.2.0.0
    论文阅读笔记
    《Computational Statistics with Matlab》硬译2
    C#抽象类和接口
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6053021.html
Copyright © 2020-2023  润新知