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. Web自动化测试环境搭建1(基于firefox火狐浏览器)

    自动化测试是时代趋势,因此很多测试人员开始研究自动化测试,web自动化测试化测试并不难,但是很多人都是被挡在了环境搭建这一步,后面学习激情全无,这里,韬哥手把手教大家搭建火狐浏览器下的自动化测试环境( ...

  2. 内置方法(item系列)

    class Foo: def __init__(self,name): self.name = name def __getitem__(self, item): # 获取时触发 print('get ...

  3. STL之--插入迭代器(back_inserter,inserter,front_inserter的区别)

    除了普通迭代器,C++标准模板库还定义了几种特殊的迭代器,分别是插入迭代器.流迭代器.反向迭代器和移动迭代器,定义在<iterator>头文件中,下面主要介绍三种插入迭代器(back_in ...

  4. leetcode-汉明距离

    汉明距离 两个整数之间的汉明距离指的是这两个数字对应二进制位不同的位置的数目. 给出两个整数 x 和 y,计算它们之间的汉明距离. 注意: 0 ≤ x, y < 231. 示例: 输入: x = ...

  5. Redis命令续

     Redis 集合命令 下表列出了 Redis 集合基本命令: 序号 命令及描述 1 SADD key member1 [member2] 向集合添加一个或多个成员 2 SCARD key 获取集合的 ...

  6. c++容器 STL

    2019-01-24 22:30:32 记录学习PAT的一些知识,有待更新 注:本文是对Algorithm 算法笔记 的总结 C++标准库模板(Standard Template Library,ST ...

  7. 菜鸟之路——机器学习之决策树个人理解及Python实现

    最近开始学习机器学习,以下会记录我学习中遇到的问题以及我个人的理解 决策树算法,网上很多介绍,在这不复制粘贴.下面解释几个关键词就好. 信息熵(entropy):就是信息不确定性的多少 H(x)=-Σ ...

  8. leetcode个人题解——#5 Container with most water

    class Solution { public: string longestPalindrome(string s) { int length = s.length(); ) return s; ; ...

  9. 【转载】java byte转十六进制

    public static String bytes2HexString(byte[] b) { String ret = ""; for (int i = 0; i < b ...

  10. PHP 签到,与时间获取,数组长度获取

    本文实例讲述了php实现签到功能的方法.分享给大家供大家参考,具体如下:首先我在数据库里建了两张表,一个是用户的积分表,一个是签到状态表,分来用来记录用户的积分数和先到状态 在用户签到状态表中我们有一 ...