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.

[AngualrJS NG-redux] Map State and Dispatchers to Redux的更多相关文章

  1. react中界面跳转 A界面跳B界面,返回A界面,A界面状态保持不变 redux的state方法

    在上一篇文章中说过了react中界面A跳到B,返回A,A界面状态保持不变,上篇中使用的是传统的localStorage方法,现在来使用第二种redux的state方法来实现这个功能 现在我刚接触red ...

  2. 【React】360- 完全理解 redux(从零实现一个 redux)

    点击上方"前端自习课"关注,学习起来~ 前言 记得开始接触 react 技术栈的时候,最难理解的地方就是 redux.全是新名词:reducer.store.dispatch.mi ...

  3. react+redux教程(七)自定义redux中间件

    今天,我们要讲解的是自定义redux中间件这个知识点.本节内容非常抽象,特别是中间件的定义原理,那多层的函数嵌套和串联,需要极强逻辑思维能力才能完全消化吸收.不过我会多罗嗦几句,所以不用担心. 例子 ...

  4. Redux的State不应该全部放在Store里

    使用了redux管理应用的状态,应用的状态不应该全部放在Store里面. 前端状态主要有一下两种: 1. Domain data 2. UI State 1. Domain data 来自于服务端对领 ...

  5. [Functional Programming ADT] Initialize Redux Application State Using The State ADT

    Not only will we need to give our initial state to a Redux store, we will also need to be able to re ...

  6. react脚手架改造(react/react-router/redux/eslint/karam/immutable/es6/webpack/Redux DevTools)

    公司突然组织需要重新搭建一个基于node的论坛系统,前端采用react,上网找了一些脚手架,或多或少不能满足自己的需求,最终在基于YeoMan的react脚手架generator-react-webp ...

  7. redux源码解析(深度解析redux+异步demo)

    redux源码解析 1.首先让我们看看都有哪些内容 2.让我们看看redux的流程图 Store:一个库,保存数据的地方,整个项目只有一个 创建store Redux提供 creatStore 函数来 ...

  8. Immutable.js 以及在 react+redux 项目中的实践

    来自一位美团大牛的分享,相信可以帮助到你. 原文链接:https://juejin.im/post/5948985ea0bb9f006bed7472?utm_source=tuicool&ut ...

  9. 谈谈React那些小事

    前言 说起React,那也是近一年多时间火起来的前端框架,其在Facebook的影响力和大力推广下,已然成为目前前端界的中流砥柱.在如今的前端框架界,React.Vue.Angular三分天下的时代已 ...

随机推荐

  1. 常用的130个vim命令

    最近VIM用的也越来越多了...因为确实在慢慢的把win下的编辑习惯转成unix下的编辑习惯..._vimrc也在不断的完善中先贴一下平时在VIM中使用中的命令...有很多也是我没有掌握的 (估计也是 ...

  2. 用Ngen指令加快C#程序的启动速度

    用Ngen指令加快C#程序的启动速度 由于C#是使用实时 (JIT) 编译器编译原始程序集.因此第一次运行C#程序(或Dll)时,程序的启动非常慢.为了提高用户的体验,可以用Microsoft的供的本 ...

  3. python版 百度签到

    经常玩贴吧,刚学python ,所以自己弄了一个python版的签到程序.自己的东西总是最好的. 登陆模块参考的http://www.crifan.com/emulate_login_website_ ...

  4. HDU——T 3336 Count the string

    http://acm.hdu.edu.cn/showproblem.php?pid=3336 Time Limit: 2000/1000 MS (Java/Others)    Memory Limi ...

  5. jquery的图片轮播 模板类型

    先说一下用到的几个重要的事件 j jQuery on()方法是官方推荐的绑定事件的一个方法. $(selector).on(event,childSelector,data,function,map) ...

  6. activity-启动动画的设定(下面弹出出现,弹入下面消失)

    1.今天为了把一个activity以dialog的形式显示,而且实现从开始的时候从底部往上弹出,结束的时候,从上往下消失,做了如下的工作. 1)如果把一个activity以dialog的形式显示? 这 ...

  7. 16.REPL 命令

    转自:http://www.runoob.com/nodejs/nodejs-tutorial.html ctrl + c - 退出当前终端. ctrl + c 按下两次 - 退出 Node REPL ...

  8. Linux shell command学习笔记(一)

    Shell的种类有很多种,例如CSH,Bourne Shell,Korn Shell.在现在的大多数Linux发行版中,默认的Shell一般都是Bourne again shell(bash). &l ...

  9. 读阮一峰《ECMAScript 6 入门》小结

    读阮一峰<ECMAScript 6 入门>小结,http://es6.ruanyifeng.com/ 1. ES6简介 Babel 是一个广泛使用的 ES6 转码器,可以将 ES6 代码转 ...

  10. BZOJ1503: [NOI2004]郁闷的出纳员(Splay)

    Description OIER公司是一家大型专业化软件公司,有着数以万计的员工.作为一名出纳员,我的任务之一便是统计每位员工的 工资.这本来是一份不错的工作,但是令人郁闷的是,我们的老板反复无常,经 ...