[Angualrjs Ng-redux] Map state and Dispatchers to Redux

In this lesson, we is going to learn how to map our Angular component directly to our application store using the Connect method on Ngredux.

In Angular, it's a common technique to bind a controller property directly to the model so that we controllers remain Li Ghtweight 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 Sto Re, but also binds our controller to our action creators. This allows us-drastically simplify our controllers as we is able to delete a bunch of local controller methods as the Y become unnecessary because of our mappings.

Connect (mapstatetothis, actions) (context):

P1:mapStateToThis:function (state),

P2:actions:object-Actionscreators

P3:context

Basiclly Connect do things:

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

this. Store.dispatch (this. Categoriesactions.getcategoreis ());

Instead can do:

this. Getcategoreis ();

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

So instead doing like this:

 This this. Store.subscribe (() = {      this-this. Store.getstate (). Categories ;        This  This . Store.getstate (). Category;    });

Now you can does this:

 This this. Store.connect (the. 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 would replace:

 This this. Store.subscribe (() = {      this.  Categoriesthis. Store.getstate ().  Categories;       this. currentcategory  This . Store.getstate (). category;    });

Actions:

Actions  This  This . bookmarksactions);      This this. Store.connect (the. Mapstatetothis, Actions) (this); 

The actions are an object contains the actions creators your need for this controller.

Other Benefits:

So for example you has a function called 'deletebookmark' on the controller. And inside this function, your call ' this. Bookmarksactions. Deletebookmark (bookmark) ' function.

Functions ' name is the same, then you can get rid of the ' deletebookmark ' the whole function.

<type= "button"  class= "Close"  ng-click= " Bookmarkslistctrl.deletebookmark (Bookmark) ">&times; </ Button >

/* //The whole function can Removeddeletebookmark (bookmark) {    This.store.dispatch (this      . Bookmarksactions.deletebookmark (bookmark)    )  }* /

becasue connect function already exprots the 'deletedbookmark' function to the CTRL.

[Angualrjs Ng-redux] Map state and Dispatchers to Redux