bindActionCreators
在 http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html
没有介绍这个,react-redux,需要自动加入actions
connect
connect 会把State和dispatch转换成props传递给子组件。它看起来是下面这样的:
import * as actionCreators from './actionCreators'
import { bindActionCreators } from 'redux'
function mapStateToProps(state) {
return { todos: state.todos }
}
function mapDispatchToProps(dispatch) {
return { actions: bindActionCreators(actionCreators, dispatch) }
}
export default connect(mapStateToProps, mapDispatchToProps)(Component)
它会让我们传递一些参数:mapStateToProps,mapDispatchToProps,mergeProps(可不填)和React组件。
之后这个方法会进行一系列的黑魔法,把state,dispatch转换成props传到React组件上,返回给我们使用。
mapStateToProps:
mapStateToProps 是一个普通的函数。
当它被connect调用的时候会为它传递一个参数State。
mapStateToProps需要负责的事情就是 返回需要传递给子组件的State,返回需要传递给子组件的State,返回需要传递给子组件的State,(重要的事情说三遍。。。。)然后connect会拿到返回的数据写入到react组件中,然后组件中就可以通过props读取数据啦~~~~
它看起来是这样的:
function mapStateToProps(state) {
return { list: state.list }
}
因为stat是全局State,里面包含整个项目的所有State,但是我不需要拿到所有State,我只拿到我需要的那部分State即可,所以需要返回 state.list 传递给组件
mapDispatchToProps:
与mapStateToProps很像,mapDispatchToProps也是一个普通的函数。
当它被connect调用的时候会为它传递一个参数dispatch。
mapDispatchToProps负责返回一个 dispatchProps
dispatchProps
是actionCreator的key和dispatch(action)的组合。
dispatchProps
看起来长这样:
{
addItem: (text) => dispatch(action)
}
connect 收到这样的数据后,会把它放到React组件上。然后子组件就可以通过props拿到addItem并且使用啦。
this.props.addItem('Hello World~');
如果觉得复杂,不好理解,,那我用大白话描述一下
就是通过mapDispatchToProps这个方法,把actionCreator变成方法赋值到props,每当调用这个方法,就会更新State。。。。额,,这么说应该好理解了。。
bindActionCreators:
但如果我有很多个Action,总不能手动一个一个加。Redux提供了一个方法叫 bindActionCreators
。
bindActionCreators
的作用就是将 Actions
和 dispatch
组合起来生成mapDispatchToProps
需要生成的内容。
它看起来像这样:
let actions = {
addItem: (text) => {
type: types.ADD_ITEM,
text
}
}
bindActionCreators(actions, dispatch); // @return {addItem: (text) => dispatch({ type: types.ADD_ITEM, text })}
bindActionCreators的更多相关文章
- Redux源码分析之bindActionCreators
Redux源码分析之基本概念 Redux源码分析之createStore Redux源码分析之bindActionCreators Redux源码分析之combineReducers Redux源码分 ...
- redux的bindActionCreators
bindActionCreators是redux的一个API,作用是将单个或多个ActionCreator转化为dispatch(action)的函数集合形式. 开发者不用再手动dispatch(ac ...
- Redux API之bindActionCreators
bindActionCreators(actionCreators,dispatch) 把 action creators 转成拥有同名 keys 的对象,但使用 dispatch 把每个 actio ...
- bindActionCreators作用
个人总结: 讲一下bindActionCreators这个API, bindActionCreators是要结合mapDispatchToProps来使用的. mapDispatchToProps函数 ...
- 基于React,Redux以及wilddog的聊天室简单实现
本文主要是使用ReactJs和Redux来实现一个聊天功能的页面,页面极其简单.使用React时间不长,还是个noob,有不对之处欢迎大家吐槽指正. 还要指出这里没有使用到websocket等技术来实 ...
- react-redux原理分析
写在前面 之前写了一篇分析Redux中Store实现的文章(详见:Redux原理(一):Store实现分析),突然意识到,其实React与Redux并没有什么直接的联系.Redux作为一个通用模块,主 ...
- Redux原理(一):Store实现分析
写在前面 写React也有段时间了,一直也是用Redux管理数据流,最近正好有时间分析下源码,一方面希望对Redux有一些理论上的认识:另一方面也学习下框架编程的思维方式. Redux如何管理stat ...
- 史上最全的 Redux 源码分析
前言 用 React + Redux 已经一段时间了,记得刚开始用Redux 的时候感觉非常绕,总搞不起里面的关系,如果大家用一段时间Redux又看了它的源码话,对你的理解会有很大的帮助.看完后,在回 ...
- react+redux教程(一)connect、applyMiddleware、thunk、webpackHotMiddleware
今天,我们通过解读官方示例代码(counter)的方式来学习react+redux. 例子 这个例子是官方的例子,计数器程序.前两个按钮是加减,第三个是如果当前数字是奇数则加一,第四个按钮是异步加一( ...
随机推荐
- 承接Unreal4外包虚幻外包,北京正规公司
VR产业链的现状 去年Facebook 20亿美元收购虚拟现实技术Oculus VR,提高了大家对VR设备.而国内,红杉资本投资蚁视,更是引爆了资本市场对VR/AR 的关注.其中有四块是我们较为常见且 ...
- Keep-Alive 总结
一.简介 Keep-Alive是http请求头信息中的一个配置参数,开启之后俗称保持HTTP长连接,HTTP 1.0和HTTP 1.1都支持,HTTP1.0中该属性默认是关闭的,可在头信息中配置开启( ...
- ERROR: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'type=InnoDB' at line 7
问题: 使用hibernate4.1.1,数据库使用mysql5.1.30,使用hibernate自动生成数据库表时,hibernate方言使用org.hibernate.dialect.MySQLI ...
- USVN
我们最近将快盘上的东西迁移到了svn上,因为快盘总是不会不小心删掉或者修改了某些文件.为了能保留历史记录我们统一迁移到svn上.为了方便权限管理,我对比了几个svn的权限管理工具,最后觉得还是usvn ...
- js加解密
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- OAF_开发系列20_实现OAF打印功能
ddddd 添加一个页面级的button区域:pagebuttonBar,在之下添加button item ,这里主要设置的参数有:采用默认的oaf的打印按钮的id名称: IcxPrintablePa ...
- Tomcat服务相关
1. 将Tomcat安装成服务. 找到bin\service.bat文件,往cmd命令行窗口一拉,如果只提示service /remove [../..]那就是Tomcat和java的路径配置没问题. ...
- 编译安装带ssl 模块指定版本Python
出现这个或者fatal error: openssl/名单.h: No such file or directory.都是没有安装libssl-dev- libssl-dev包含libraries ...
- FileUpload 上传文件,并实现c#使用Renci.SshNet.dll实现SFTP文件传输
fileupload上传文件和jquery的uplodify控件使用方法类似,对服务器控件不是很熟悉,记录一下. 主要是记录新接触的sftp文件上传.服务器环境下使用freesshd搭建好环境后,wi ...
- NOIP模拟赛-征兵
一个国王,他拥有一个国家.最近他因为国库里钱太多了,要征集一只部队要保卫国家.他选定了N个女兵和M个男兵,但事实上每征集一个兵他就要花10000RMB,即使国库里钱再多也伤不起啊.他发现,某男兵和某女 ...