[AngualrJS NG-redux] Map State and Dispatchers to Redux

Posted 2020-08-19 Answer1215

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.