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.

  • 相关阅读:
    Hibernate 中 简便proxool连接池配置
    卸载oracle删除注册表脚本
    hibernate的@EmbeddedId嵌入式主键详解
    Activiti工作流学习(三)Activiti工作流与spring集成
    Activiti工作流学习(二)流程实例、执行对象、任务
    Activiti工作流学习(一)部署对象和流程定义
    Enum(枚举类型)的基本应用
    Activiti工作流引擎参考资料
    条形码参考资料
    推荐两款PC健康小软件
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6063087.html
Copyright © 2011-2022 走看看