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.

  • 相关阅读:
    [算法]外部排序
    [笔试]华为编程大赛题目
    [C++]字符串处理方法(STL与C风格)
    如何动态建立VFP能够打开的中文字段 dbf 表 北极星
    使用 VCL BDE 组件动态创建数据库表 北极星
    如何用Table控件判断数据库是否为空 北极星
    DNGuard HVM副产品(元数据名称编辑器)
    常见dotNet加密保护工具分析介绍
    DNGuard HVM 试用版 RC1 发布
    [转载]Modifying IL at runtime
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6063087.html
Copyright © 2011-2022 走看看