本文作者:IMWeb 黄qiong 原文出处:IMWeb社区 未经同意,禁止转载

前言
刚接触redux的时候,发现大家对mapDispatchToProps使用有几种方法,而且都跑通了,本文来介绍下,redux的mapStateToProps,mapDispatchToProps的一些使用小姿势。

mapStateToProps(state, ownProps)
mapStateToProps是一个函数,用于建立组件跟store的state的映射关系
作为一个函数,它可以传入两个参数,结果一定要返回一个object
传入mapStateToProps之后,会订阅store的状态改变,在每次store的state发生变化的时候,都会被调用
ownProps代表组件本身的props,如果写了第二个参数ownProps,那么当prop发生变化的时候,mapStateToProps也会被调用。例如,当 props接收到来自父组件一个小小的改动,那么你所使用的 ownProps 参数,mapStateToProps 都会被重新计算)。
mapStateToProps可以不传,如果不传,组件不会监听store的变化,也就是说Store的更新不会引起UI的更新
example:

const mapStateToProps = (state) => {
return {
todoList: state.todoList
}
}
传入了props的:

const mapStateToProps = (state, ownProps) => {
return {
active: ownProps.filter === state.visibilityFilter
}
}
mapDispatchToProps
mapDispatchToProps用于建立组件跟store.dispatch的映射关系
可以是一个object,也可以传入函数
如果mapDispatchToProps是一个函数,它可以传入dispatch,ownProps, 定义UI组件如何发出action,实际上就是要调用dispatch这个方法
/* 假设actions是一个import进来的值为actionCreator的object */
action.increase = function (info) {
return {
{
type:'INCREASE',
info
}
}
}

const mapDispatchToProps = (dispatch, ownProps) => {
return {
increase: (...args) => dispatch(actions.increase(...args)),
decrease: (...args) => dispatch(actions.decrease(...args))
}
}
调用actions.increase()只能得到一个 action对象{type:'INCREASE'} ,要触发这个 action必须在store 上调用 dispatch 方法。 diapatch正是 mapDispatchToProps的第一个参数。但是,为了不让 组件感知到 dispatch 的存在,我们需要将increase 和 decrease 两个函数包装一下,使之成为直接可被调用的函数(即,调用该方法就会触发 dispatch )。

而前面介绍bindActionCreator的时候介绍过,可以直接将action包装成可以被调用的函数。

所以借助bindActionCreator, 上面的mapDispatchToProps可以变成

import {bindActionCreators} from 'redux';

const mapDispatchToProps = {
} = (dispatch, ownProps) => {
return bindActionCreators({
increase: action.increase,
decrease: action.decrease
}, dispatch);
}

/* 返回跟上面一样的object */
{
increase: (...args) => dispatch(action.increase(...args)),
decrease: (...args) => dispatch(action.decrease(...args)),
}
如果mapDispatchToProps是一个函数, 并且传入ownProps, 当组件获取新的props的时候,mapDispatchToProps也会被调用.
传入一个object,其中这个object所对应的value必须是actionCreator,这样redux里面会自动帮我们调用bindActionCreator,所以上面又可以变成
const mapDispatchToProps = {
...action
}
不传的时候,React-Redux会自动将dispatch注入组件的props。
参考
http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html
https://www.tuicool.com/articles/MrmYN36

来源地址:https://www.f2ecoder.net/715.html

mapStateToProps,mapDispatchToProps的使用姿势的更多相关文章

  1. react依赖注入之mapStateToProps&&mapDispatchToProps

    今天看前辈写的代码,看到mapStateToProps&&mapDispatchToProps处,不明白,于是又是各种找资料,在CSDN博客中发现一篇好文,摘抄到此,方便自己阅读! 原 ...

  2. connect(mapStateToProps,mapDispatchToProps) 的写法

    1.写法 import { connect } from 'redux'; import { loading, asyncRequset } from '../../actions/common'; ...

  3. [Redux] Using mapDispatchToProps() Shorthand Notation

    We will learn how to avoid the boilerplate code in mapDispatchToProps() for the common case where ac ...

  4. 动手实现 React-redux(四):mapDispatchToProps

    在重构 ThemeSwitch 的时候我们发现,ThemeSwitch 除了需要 store 里面的数据以外,还需要 store 来 dispatch: ... // dispatch action ...

  5. Redux源码学习笔记

    https://github.com/reduxjs/redux 版本 4.0.0 先了解一下redux是怎么用的,此处摘抄自阮一峰老师的<Redux 入门教程> // Web 应用是一个 ...

  6. react-redux

    1. 首先redux,与react是两个独立的个体,项目中可以只用react,也可以只用redux 1.1 react-redux: 是一个redux作者专门为react制作的 redux, 增加了新 ...

  7. react-redux原理分析

    写在前面 之前写了一篇分析Redux中Store实现的文章(详见:Redux原理(一):Store实现分析),突然意识到,其实React与Redux并没有什么直接的联系.Redux作为一个通用模块,主 ...

  8. react+redux教程(一)connect、applyMiddleware、thunk、webpackHotMiddleware

    今天,我们通过解读官方示例代码(counter)的方式来学习react+redux. 例子 这个例子是官方的例子,计数器程序.前两个按钮是加减,第三个是如果当前数字是奇数则加一,第四个按钮是异步加一( ...

  9. redux介绍与入门

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Helvetica } p.p2 { margin: 0.0px 0.0px 0.0px 0. ...

随机推荐

  1. webbench,简单、实用!

    官网:http://home.tiscali.cz/~cz210552/webbench.html   1.下载并安装 # wget http://home.tiscali.cz/~cz210552/ ...

  2. 谷歌浏览器使用IE内核

    经常使用谷歌浏览器去到处溜达,可是,居然还不知道谷歌浏览的还有很多新鲜的设置,昨天遇到了调试一个脚本没有出现效果,而在IE中就可以显示所谓的效果: 查询了下,看到谷歌浏览器确实对脚本的部分样式要求还是 ...

  3. Linux基础命令---gzexe

    gzexe 压缩可执行文件,在执行程序的时候可以自动实现解压.此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.SUSE.openSUSE.Fedora. 1.语法       g ...

  4. AI+教育落地,百度大脑如何让校园更智能?

    人工智能作为影响社会底层技术革命逐渐向传统行业渗透,“AI+”已经替代“互联网+”成为创业创新的新引擎,出人意料的是,在AI在教育业的率先落地并且相当火爆. 现在,人工智能教育已成为从业者心目中的“教 ...

  5. Python Web学习笔记之WebSocket原理说明

    众所周知,Web应用的通信过程通常是客户端通过浏览器发出一个请求,服务器端接收请求后进行处理并返回结果给客户端,客户端浏览器将信息呈现.这种机制对于信息变化不是特别频繁的应用可以良好支撑,但对于实时要 ...

  6. Python入门之Python Colorama模块

    Python的Colorama模块,可以跨多终端,显示字体不同的颜色和背景,只需要导入colorama模块即可,不用再每次都像linux一样指定颜色: 官方参考:https://pypi.org/pr ...

  7. bzoj4591 / P4345 [SHOI2015]超能粒子炮·改

    P4345 [SHOI2015]超能粒子炮·改 题意:求$\sum_{i=1}^{k}C(n,i)\%(P=2333)$ 肯定要先拆开,不然怎么做呢(大雾) 把$C(n,i)$用$lucas$分解一下 ...

  8. 20145220韩旭飞《网络对抗》Exp2 后门原理与实践

    20145220韩旭飞<网络对抗>Exp2 后门原理与实践 常用后门工具实践 Windows获得Linux Shell 在Windows下,先使用ipconfig指令查看本机IP: 使用n ...

  9. Jackson 使用和注意项

    依赖maven: <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId ...

  10. Linq in GroupBy GroupJoin

    还是上一份的代码例子: public class Person { public int ID { get; set; } public string Name { get; set; } publi ...