Lesson 39 动手实现 React-redux(四):mapDispatchToProps
发布日期:2022-09-10 03:06:29 浏览次数:2 分类:技术文章

本文共 3257 字,大约阅读时间需要 10 分钟。

Lesson 39 动手实现 React-redux(四):mapDispatchToProps

在重构 ThemeSwitch 的时候我们发现,ThemeSwitch 除了需要 store 里面的数据以外,还需要 storedispatch

...  // dispatch action 去改变颜色  handleSwitchColor (color) {
const {
store } = this.context store.dispatch({
type: 'CHANGE_COLOR', themeColor: color }) }...

目前版本的 connect 是达不到这个效果的,我们需要改进它。

想一下,既然可以通过给 connect 函数传入 mapStateToProps 来告诉它如何获取、整合状态,我们也可以想到,可以给它传入另外一个参数来告诉它我们的组件需要如何触发 dispatch。我们把这个参数叫 mapDispatchToProps

const mapDispatchToProps = (dispatch) => {
return {
onSwitchColor: (color) => {
dispatch({
type: 'CHANGE_COLOR', themeColor: color }) } }}

mapStateToProps 一样,它返回一个对象,这个对象内容会同样被 connect 当作是 props 参数传给被包装的组件。不一样的是,这个函数不是接受 state 作为参数,而是 dispatch,你可以在返回的对象内部定义一些函数,这些函数会用到 dispatch 来触发特定的 action

调整 connect 让它能接受这样的 mapDispatchToProps

export const connect = (mapStateToProps, mapDispatchToProps) => (WrappedComponent) => {
class Connect extends Component {
static contextTypes = {
store: PropTypes.object } constructor () {
super() this.state = {
allProps: {
} } } componentWillMount () {
const {
store } = this.context this._updateProps() store.subscribe(() => this._updateProps()) } _updateProps () {
const {
store } = this.context let stateProps = mapStateToProps ? mapStateToProps(store.getState(), this.props) : {
} // 防止 mapStateToProps 没有传入 let dispatchProps = mapDispatchToProps ? mapDispatchToProps(store.dispatch, this.props) : {
} // 防止 mapDispatchToProps 没有传入 this.setState({
allProps: {
...stateProps, ...dispatchProps, ...this.props } }) } render () {
return
} } return Connect}

_updateProps 内部,我们把store.dispatch 作为参数传给 mapDispatchToProps ,它会返回一个对象 dispatchProps。接着把 statePropsdispatchPropsthis.props 三者合并到 this.state.allProps 里面去,这三者的内容都会在 render 函数内全部传给被包装的组件。

另外,我们稍微调整了一下,在调用 mapStateToPropsmapDispatchToProps 之前做判断,让这两个参数都是可以缺省的,这样即使不传这两个参数程序也不会报错。

这时候我们就可以重构 ThemeSwitch,让它摆脱 store.dispatch

import React, {
Component } from 'react'import PropTypes from 'prop-types'import {
connect } from './react-redux'class ThemeSwitch extends Component {
static propTypes = {
themeColor: PropTypes.string, onSwitchColor: PropTypes.func } handleSwitchColor (color) {
if (this.props.onSwitchColor) {
this.props.onSwitchColor(color) } } render () {
return (
) }}const mapStateToProps = (state) => {
return {
themeColor: state.themeColor }}const mapDispatchToProps = (dispatch) => {
return {
onSwitchColor: (color) => {
dispatch({
type: 'CHANGE_COLOR', themeColor: color }) }[添加链接描述](https://github.com/huzidaha/react-naive-book) }}ThemeSwitch = connect(mapStateToProps, mapDispatchToProps)(ThemeSwitch)export default ThemeSwitch

光看 ThemeSwitch 内部,是非常清爽干净的,只依赖外界传进来的 themeColoronSwitchColor。但是 ThemeSwitch 内部并不知道这两个参数其实都是我们去 store 里面取的,它是 Dumb 的。这时候这三个组件的重构都已经完成了,代码大大减少、不依赖 context,并且功能和原来一样。

当前内容版权归 或其关联方所有,如需对内容或内容相关联开源项目进行关注与资助,请点击 .

最初的起点:

上一篇:

下一篇:

转载地址:https://blog.csdn.net/Mr_zzr/article/details/125798517 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:Lesson 40 动手实现 React-redux(五):Provider
下一篇:Lesson 38 动手实现 React-redux(三):connect 和 mapStateToProps

发表评论

最新留言

能坚持,总会有不一样的收获!
[***.219.124.196]2024年03月03日 17时06分03秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

java 数组元素位置_Java – 在数组中获取元素位置 2021-06-24
c 泛型与java泛型_C ++和Java中的“泛型”类型之间有什么区别? 2021-06-24
java 返回实体对象_java 封装返回结果实体类 返回结果以及错误信息 2021-06-24
java web 防止sql注入攻击_JavaWeb防注入知识点(一) 2021-06-24
java ssm 异常分类_SSM项目常见的异常与处理提示(一) 2021-06-24
java定义矩形类_Java定义矩形类 2021-06-24
java变量怎么变常量_Java的常量与变量是什么?怎么学习呀? 2021-06-24
java开发招聘试题_客户化开发招聘试题-Java开发.doc 2021-06-24
java jdk win10 1335_win10下安装java jdk,tomcat 2021-06-24
java list二分查找_java中的ArrayList和LinkedList的二分查找速度比 | 学步园 2021-06-24
php中的变量名称用什么表示,PHP变量,方法,类等名称中的有效字符是什么? 2021-06-24
pic32mx是什么cpu_PIC32MX单片机外设库使用(Ⅰ)- 系统时钟及I/O口基本设置 2021-06-24
用c 在mysql上存图片_C 批量保存图片进 mysql 利用MYSQL_BIND插入longblob 2021-06-24
mysql 1045 28000_mysql报关于用户密码1045(28000),几种处理方法 (zhuan) 2021-06-24
solr比mysql的优势_Solr与Elasticsearch的优缺点比较总结和归纳 2021-06-24
华为博士招聘上机考试题目_牛客网-华为-2020届校园招聘上机考试-3 2021-06-24
python中for可以做变量名吗_Python中使用动态变量名的方法 2021-06-24
mysql 日期转换天数_MySQL 日期操作 增减天数、时间转换、时间戳 2021-06-24
java对象去重复_JAVA中List对象去除重复值的方法 2021-06-24
java bss_[转] .bss段和.data段的区别 2021-06-24