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的更多相关文章

  1. 手写 redux 和 react-redux

    1.手写 redux redux.js /** * 手写 redux */ export function createStore(reducer) { // 当前状态 let currentStat ...

  2. [Next] 四.在next中引入redux

    添加 redux 写过 react 稍微复杂一些应用的话,应该都对 redux(mobx)有一定的了解.这次将 redux 引入到项目中 因为之前写项目的习惯,更喜欢使用 redux-thunk 改写 ...

  3. 一起学习造轮子(三):从零开始写一个React-Redux

    本文是一起学习造轮子系列的第三篇,本篇我们将从零开始写一个React-Redux,本系列文章将会选取一些前端比较经典的轮子进行源码分析,并且从零开始逐步实现,本系列将会学习Promises/A+,Re ...

  4. react技术栈实践(2)

    本文来自网易云社区 作者:汪洋 这时候还没完,又有两个问题引出来了. 按照上面的配置,第三方库 antd 竟然也被编译了,导致样式失败. react中,一旦包裹了子组件,子组件没办法直接使用 styl ...

  5. Redux源码分析之bindActionCreators

    Redux源码分析之基本概念 Redux源码分析之createStore Redux源码分析之bindActionCreators Redux源码分析之combineReducers Redux源码分 ...

  6. Redux API之bindActionCreators

    bindActionCreators(actionCreators,dispatch) 把 action creators 转成拥有同名 keys 的对象,但使用 dispatch 把每个 actio ...

  7. 基于React,Redux以及wilddog的聊天室简单实现

    本文主要是使用ReactJs和Redux来实现一个聊天功能的页面,页面极其简单.使用React时间不长,还是个noob,有不对之处欢迎大家吐槽指正. 还要指出这里没有使用到websocket等技术来实 ...

  8. Redux原理(一):Store实现分析

    写在前面 写React也有段时间了,一直也是用Redux管理数据流,最近正好有时间分析下源码,一方面希望对Redux有一些理论上的认识:另一方面也学习下框架编程的思维方式. Redux如何管理stat ...

  9. 史上最全的 Redux 源码分析

    前言 用 React + Redux 已经一段时间了,记得刚开始用Redux 的时候感觉非常绕,总搞不起里面的关系,如果大家用一段时间Redux又看了它的源码话,对你的理解会有很大的帮助.看完后,在回 ...

随机推荐

  1. HTML随笔3

    1. *svg(可伸缩矢量图)标签画圆,其中r表示半径,cx和cy表示其圆心的坐标 <svg><circle r="100" cx="200" ...

  2. [CF294B]Shaass and Bookshelf

    问题描述 Shaass拥有n本书.他想为他的所有书制作一个书架,并想让书架的长宽尽量小.第i本书的厚度是t[i],且这本书的纸张宽度是w[i].书的厚度是1或2,所有书都有同样的高度(即书架的高是均匀 ...

  3. JAVA基础学习之路(四)定义简单java类

    简单java类开发一般原则: 类名称必须有意义,再怎么说,要让人家看的明白吧 类之中所有属性必须使用private封装,并提供setter,getter方法 类之中可以有多个构造方法,但是必须保留有一 ...

  4. Java学习 · 初识 面向对象基础二

    Package 为什么需要使用package a)   解决类重名的问题 b)   便于管理类 怎么使用package a)   类的第一句非注释性语句 b)   命名:域名倒着写,再加上模块名 注意 ...

  5. Balanced Lineup:线段树:区间最值 / RMQ

    不要被线段树这个名字和其长长的代码吓到. D - Balanced Lineup Description For the daily milking, Farmer John's N cows (1 ...

  6. nordic mesh中的消息缓存实现

    nordic mesh中的消息缓存实现 代码文件msg_cache.h.msg_cache.c. 接口定义 头文件中定义了四个接口,供mesh协议栈调用,四个接口如下所示,接口的实现代码在msg_ca ...

  7. 四、oracle 用户管理二

    一.使用profile管理用户口令概述:profile是口令限制,资源限制的命令集合,当建立数据库时,oracle会自动建立名称为default的profile.当建立用户没有指定profile选项时 ...

  8. CDH组件目录\主机资源分配\端口

    目录: /var/log/cloudera-scm-installer : 安装日志目录. /var/log/* : 相关日志文件(相关服务的及CM的). /usr/share/cmf/ : 程序安装 ...

  9. HTML5 Geolocation位置信息定位总结

    现在定位功能很常用,所以抽出一些时间将这个功能的知识总结一下作为知识梳理的依据.HTML5 Geolocation的定位用法很简单,首先请求位置信息,用户同意,则返回位置信息.HTML5 Geoloc ...

  10. 软工网络15团队作业4——Alpha阶段敏捷冲刺-2

    一.当天站立式会议照片: 二.项目进展 昨天已完成的工作: 微信公众号平台注册"小程序"的账号; 下载微信官方的小程序开发工具,这个是编辑小程序和上传审核小程序必须的工具; 大家一 ...