zoukankan      html  css  js  c++  java
  • [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.

  • 相关阅读:
    Linux用root强制踢掉已登录用户;用fail2ban阻止ssh暴力破解root密码
    JDBC开发
    JSP指令与动作元素
    Jsp——状态管理
    JavaBeans
    JSP——九大内置对象
    Jsp基础语法
    WEB-INF目录结构
    JavaWeb简介
    UML——初识
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6053021.html
Copyright © 2011-2022 走看看