本文作者: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. arcgis中加载google在线地图

    打开arcmap——文件——arcgis online ——搜索china maps 选择china

  2. uva10003

    /* 2014.3.6 这题说的是给你了一根木棒 然后 n 个点(线段上的点) 然后计算 在这 n个点上都切下去的 最小花费 举个例子 100 3 25 50 75 如果 从 25 开始切 然后切 5 ...

  3. 数组相同的key组成新的数组

    function dataFunc (data){ var b = {}; $.each(data, function (i,v){ var g = v[key], //将评价人相同的拿出来组成一个新 ...

  4. VisualStudio: 窗口背景颜色设置成黑色

    Tools>Options>Environment>General >Color theme

  5. HTML5代码规范

    HTML5代码规范html标签里面等号两边不要留空格在IE下可能会识别不了html5等号前后可以使用空格,但仍不推荐使用. HTML 代码约定很多 Web 开发人员对 HTML 的代码规范知之甚少.在 ...

  6. SpringMVC Spring MyBatis 框架整合 Annotation MavenProject

    项目结构目录 pom.xml   jar包管理 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&q ...

  7. Centos7.5 安装Netdata

    切为root, yum install zlib-devel gcc make git autoconf autogen guile-devel automake pkgconfig -y yum i ...

  8. Python入门之python装饰器的4种类型:函数装饰函数、函数装饰类、类装饰函数、类装饰类

    一:函数装饰函数 def wrapFun(func): def inner(a, b): print('function name:', func.__name__) r = func(a, b) r ...

  9. 【翻译】std::list::remove - C++ Reference

    公有成员函数 std::list::remove void remove(const value_type& val); 删除与给定值相等的元素 从容器中删除所有与 val 值相等的元素.li ...

  10. 20145220韩旭飞《网络对抗》Exp8 Web基础

    20145220韩旭飞<网络对抗>Exp8 Web基础 Web前端:HTML基础 首先,我们的Web开发是基于Apache服务器进行的,所以对于Apache的基本操作我们是应该要掌握的,对 ...