zoukankan      html  css  js  c++  java
  • [AngualrJS NG-redux] Map State and Dispatchers to Redux

    In this lesson, we are going to learn how to map our Angular component directly to our application store using the connect method on ngRedux.

    In Angular, it is a common technique to bind a controller property directly to the model so that our controllers remain lightweight and operate more as a pass through mechanism than anything else.

    Using the connect method, we can accomplish the same effect by not only binding properties directly to the application store, but also binding our controller to our action creators. This allows us to drastically simplify our controllers as we are able to delete a bunch of local controller methods as they become unnecessary because of our mappings.

    connect(mapStateToThis, actions)(context):

    p1: mapStateToThis: function(state),

    p2: actions: object --> ActionsCreators

    p3: Context

    Basiclly connect do two things:

    1. Exports the actions to the controller,  so you don't need to do like this:

    this.store.dispatch(this.CategoriesActions.getCategoreis());

    Instead you can do :

    this.getCategoreis();

    2. You don't need to subscribe to the store manully anymore, it will automaticlly subscribe to store:

    So instead doing like this:

    this.unsubscribe = this.store.subscribe(() => {
          this.categories = this.store.getState().categories;
          this.currentCategory = this.store.getState().category;
        });

    Now you can do this:

    this.unsubscribe = this.store.connect(this.mapStateToThis, actions)(this);

    The connect function also return a unsubscribe function which you can call in $onDestroy life cycle.

    mapStateToThis:

      mapStateToThis(state) {
        return {
          categories: state.categories,
          currentCategory: state.currentCategory
        };
      }

    Basiclly it will replace:

    this.unsubscribe = this.store.subscribe(() => {
          this.categories = this.store.getState().categories;
          this.currentCategory = this.store.getState().category;
        });

    actions:

    const actions = Object.assign({}, this.CategoriesActions, this.BookmarksActions);
        this.unsubscribe = this.store.connect(this.mapStateToThis, actions)(this);

    Actions is an object contains the actions creators you need for this controller.

    Other benefits:

    So for example you have a function called 'deleteBookmark' on the controller. And inside this function, you call 'this.BookmarksActions.deleteBookmark(bookmark)' function.

    Two functions' name are the same, then you can get rid of 'deleteBookmark' the whole function.

    <button type="button" class="close" ng-click="bookmarksListCtrl.deleteBookmark(bookmark)">&times;</button>
    /*
    // The whole function can be removed
    deleteBookmark(bookmark) {
        this.store.dispatch(
          this.BookmarksActions.deleteBookmark(bookmark)
        )
      }*/

    Becasue connect function already exprots the 'deletedBookmark' function to the ctrl.

  • 相关阅读:
    思蕊防静电地板
    一个老站长的22条军规
    百度天天快照知识宝典
    搜索引擎常用搜索技巧
    网站运营工作流程
    关于线程间通信
    VS2012 EF5 连接oracle11.2
    ArcSde for Oracle服务注册
    NHibernate composite-id联合主键配置
    NHibernate 的 ID 标识选择器
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6063087.html
Copyright © 2011-2022 走看看