redux的bindActionCreators
bindActionCreators是redux的一个API,作用是将单个或多个ActionCreator转化为dispatch(action)的函数集合形式。
开发者不用再手动dispatch(actionCreator(type)),而是可以直接调用方法。
目的就是简化书写,减轻开发负担。
例如:
actionCreator.js如下:
export function addTodo(text) {
return {
type: 'ADD_TODO',
text
}
}
export function removeTodo(id) {
return {
type: 'REMOVE_TODO',
id
}
}
导出的对象为:
{
addTodo : text =>
{
type: 'ADD_TODO',
text
},
removeTodo : id => {
type: 'REMOVE_TODO',
id
}
}
是以函数名为key,函数为value的一个对象
经过bindActionCeators的处理变为:
{
addTodo : text => dispatch(addTodo('text'));
removeTodo : id => dispatch(removeTodo('id'));
}
是以函数名为key,内部执行dispatch(action)的函数为value的对象,用这个对象就可以直接调用方法了,不必手动dispatch
如果传入单个actionCreator,则返回的是一个包裹dispatch的函数,而不是一个对象。
通常用在mapDispatchToProps中,向组件传递action方法:
export default connect(
(state,props) => { return {data: state.article.data,currentCate:fCurrentCate(state,props)} },
dispatch => { return {actions: bindActionCreators(acts,dispatch)} }
)(Article);
通过actions对象调用方法,就可以dispatch所有的action
参考:https://segmentfault.com/a/1190000011783611
redux的bindActionCreators的更多相关文章
- 手写 redux 和 react-redux
1.手写 redux redux.js /** * 手写 redux */ export function createStore(reducer) { // 当前状态 let currentStat ...
- [Next] 四.在next中引入redux
添加 redux 写过 react 稍微复杂一些应用的话,应该都对 redux(mobx)有一定的了解.这次将 redux 引入到项目中 因为之前写项目的习惯,更喜欢使用 redux-thunk 改写 ...
- 一起学习造轮子(三):从零开始写一个React-Redux
本文是一起学习造轮子系列的第三篇,本篇我们将从零开始写一个React-Redux,本系列文章将会选取一些前端比较经典的轮子进行源码分析,并且从零开始逐步实现,本系列将会学习Promises/A+,Re ...
- react技术栈实践(2)
本文来自网易云社区 作者:汪洋 这时候还没完,又有两个问题引出来了. 按照上面的配置,第三方库 antd 竟然也被编译了,导致样式失败. react中,一旦包裹了子组件,子组件没办法直接使用 styl ...
- Redux源码分析之bindActionCreators
Redux源码分析之基本概念 Redux源码分析之createStore Redux源码分析之bindActionCreators Redux源码分析之combineReducers Redux源码分 ...
- Redux API之bindActionCreators
bindActionCreators(actionCreators,dispatch) 把 action creators 转成拥有同名 keys 的对象,但使用 dispatch 把每个 actio ...
- 基于React,Redux以及wilddog的聊天室简单实现
本文主要是使用ReactJs和Redux来实现一个聊天功能的页面,页面极其简单.使用React时间不长,还是个noob,有不对之处欢迎大家吐槽指正. 还要指出这里没有使用到websocket等技术来实 ...
- Redux原理(一):Store实现分析
写在前面 写React也有段时间了,一直也是用Redux管理数据流,最近正好有时间分析下源码,一方面希望对Redux有一些理论上的认识:另一方面也学习下框架编程的思维方式. Redux如何管理stat ...
- 史上最全的 Redux 源码分析
前言 用 React + Redux 已经一段时间了,记得刚开始用Redux 的时候感觉非常绕,总搞不起里面的关系,如果大家用一段时间Redux又看了它的源码话,对你的理解会有很大的帮助.看完后,在回 ...
随机推荐
- egrep及扩展正则
模式:pattern 正则: grep:基本正则,查找速度慢 Extended grep:扩展正则 fgrep:fast grep,不支持正则,直接查找字符串,执行速度快 基本正则: . :任意单个字 ...
- Java 集合学习--HashMap
一.HashMap 定义 HashMap 是一个基于散列表(哈希表)实现的键值对集合,每个元素都是key-value对,jdk1.8后,底层数据结构涉及到了数组.链表以及红黑树.目的进一步的优化Has ...
- (python)leetcode刷题笔记05 Longest Palindromic Substring
5. Longest Palindromic Substring Given a string s, find the longest palindromic substring in s. You ...
- 干货来袭:Redis5.0支持的新功能说明
Redis5.0支持的新特性说明 本文内容来自华为云帮助中心 华为云DCS的Redis5.x版本继承了4.x版本的所有功能增强以及新的命令,同时还兼容开源Redis5.x版本的新增特性. Stream ...
- SVM 为什么要从原始问题变为对偶问题来求解
这个问题困扰了我许久,下面是我搜集整理到的答案 对偶问题将原始问题中的约束转为了对偶问题中的等式约束 方便核函数的引入 改变了问题的复杂度.由求特征向量w转化为求比例系数a,在原始问题下,求解的复杂度 ...
- c# html 导出word
[CustomAuthorize] public FileResult ExportQuestionCenterWord(SearchBaseQuestion search) ...
- hadoop问题集(1)
参考: http://dataunion.org/22887.html 1.mapreduce_shuffle does not exist 执行任何时报错: Container launch ...
- Centos7 下nginx nginx-1.13.4 安装
环境:CentOS Linux release 7.3.1611 (Core) Linux localhost.localdomain 3.10.0-514.26.2.el7.x86_64 #1 S ...
- Thunder团队第六周 - Scrum会议6
Scrum会议6 小组名称:Thunder 项目名称:i阅app Scrum Master:邹双黛 工作照片: 邹双黛同学在拍照,所以不在照片内. 参会成员: 王航:http://www.cnblog ...
- Java学习个人备忘录之线程间的通信
线程间通讯多个线程在处理同一资源,但是任务却不同. class Resource { String name; String sex; } //输入 class Input implements Ru ...