本文作者: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. 001-Two Sum

    Given an array of integers, return indices of the two numbers such that they add up to a specific ta ...

  2. 我的2015年ccf的解答

    只做了前三个题,在本地调试好了,不知为什么错了,好歹做了那么久,就记录一下了(注:这不是标准答案,只是我给出的解答) 这是第一题的代码: #include<stdio.h> #includ ...

  3. zoj3814

    这题说的是给了一个数在longlong范围内 然后求出小于这个数的最大的回文,枚举每位减去1后 , 他后面的位置上全部都置为9,然后在枚举每个前半部分,然后贪心取得这个数的最大值,贪心的时候写错了,错 ...

  4. OnClick,OnClientClick和OnServerClick的区别

       OnClientClick是客户端事件处理方法,一般采用JavaScript来进行处理,也就是直接在IE端运行,一点击就运行 OnClick是服务器端事件处理方法,在服务器端也就是IIS中运行, ...

  5. python+Django框架运用(一)

    Django 介绍: django是一个采用Python语言开发的开源框架,2005年发布.早期是做新闻以及内容管理的网站的,提供了非常强大的后管理系统. django官网:https://www.d ...

  6. seo标题关键字描述字数限制Title,keywords,description长度最长多长 ?

    seo标题关键字描述字数限制 seo优化各个搜索引擎收录Title,keywords,description长度最长多长 ?SEO网站优化中Title标签的作用为重中之重,好的Title也就成功了一半 ...

  7. Maximum execution time of 30 seconds exceeded解决错误方法

    Maximum execution time of 30 seconds exceeded解决错误方法Fatal error: Maximum execution time of 30 seconds ...

  8. tomcat性能调优 大赞

    从“第三天”的性能测试一节中,我们得知了决定性能测试的几个重要指标,它们是: ü 吞吐量 ü Responsetime ü Cpuload ü MemoryUsage 我 们也在第三天的学习中对Apa ...

  9. java笔试题三(javaWeb)

    1.讲一下Servlet的执行过程,doGet和doPost的区别. 执行过程: 比如注解配置版本,先继承httpServlet,一旦发送get请求 调用,再执行post方法. doGet和doPos ...

  10. SNMP学习笔记之SNMP简单概述

    0x00 SNMP简单概述 0.1.什么是Snmp SNMP是英文"Simple Network Management Protocol"的缩写,中文意思是"简单网络管理 ...