mapDispatchToProps

mapDispatchToProps 是connect的第二个参数，用来建立UI组件的参数到store.dispatch方法的映射。

render() {const { addHandleClick,decHandleClick } = this.props;return (<div><h1>Login</h1><h1>{this.props.count}</h1><Button className='margin10' type="primary" onClick={ addHandleClick }>add</Button><Button type="primary" onClick={ decHandleClick }>dec</Button></div>)
}

function mapDispatchToProps(dispatch) {return {handleClick: ()=> dispatch(addNumber(1)),decHandleClick: ()=> dispatch(delNumber(1)),}
}

function mapStateToProps(state) {return {count: state.number,list: state.list}
}

export default connect(mapStateToProps,mapDispatchToProps,
)(Login);

action.js

export const ADD = 'ADD';
export const DEL = 'DEL';
export const ADDLIST = 'ADDLIST';export function addNumber(number) {return {type: ADD,number}
}
export function delNumber(number) {return {type: DEL,number}
}export function addList(list) {return {type: ADDLIST,list}
}

reduces.js

import { ADD, DEL, ADDLIST } from '../actions';
let initState = {number: 0,list: []
};
function reducers(state = initState, action) {switch (action.type) {case ADD:return Object.assign({}, state, {number: state.number + action.number});case DEL:return Object.assign({}, state, {number: state.number - action.number});case ADDLIST:return Object.assign({}, state, {list: action.list});default:return state}
}
export default reducers

提问：
mapDispatchToProps函数有没有优化的空间呢？

const mapDispatchToProps = (dispatch)=> {return {...bindActionCreators(actionCreators,dispatch)}
}

这样的话上面调用的方式就会有所改变。

     // let { dispatch } = this.props;// let action = actionCreators.addNumber(3);// dispatch(action);this.props.addNumber(1);}decHandleClick() {//this.props.dispatch(actionCreators.delNumber(3))this.props.delNumber(1);}

bindActionCreators（actionsCreators,dispatch）
bindActionCreators的原理

function bindActionCreators(actionCreators,dispatch) {let obj = {};for(let i in actionCreators) {obj[i] = function() {dispatch(actionCreators[i]);}}return obj;
}

上面返回的是dispatch之后的函数，只需要调用即可。

this.props.delNumber(1);

mapDispatchToProps相关推荐

什么是mapDispatchToProps？
本文翻译自:What is mapDispatchToProps? I was reading the documentation for the Redux library and it has t ...
mapStateToProps，mapDispatchToProps的使用详解
前言刚接触redux的时候,发现大家对mapDispatchToProps使用有几种方法,而且都跑通了,本文来介绍下,redux的mapStateToProps,mapDispatchToProps ...
mapStateToProps mapDispatchToProps 的使用
react connect的使用 (mapStateToProps ,mapDispatchToProps) 1.举一个简单使用的例子话不多说之间贴代码引入使用 import { connect ...
mapDispatchToProps的三种方式mapStateToProps
1.mapStateToProps const mapStateToProps = state => ({color: state.reducerA.color,fontSize:state.r ...
MAPSTATETOPROPS和MAPDISPATCHTOPROPS：React-Redux的坏男孩
介绍在使用React的过程中,我发现一个很难理解的概念,而且我看到新的React开发人员正在为之奋斗. 我在说什么概念? 我说的是mapstatetoprops和mapdispatchtoprops ...
Redux 入门教程（三）：React-Redux 的用法
前两篇教程介绍了 Redux 的基本用法和异步操作,今天是最后一部分,介绍如何在 React 项目中使用 Redux. 为了方便使用,Redux 的作者封装了一个 React 专用的库 React-R ...
redux-thunk使用教程
从无到有一步一步创建一个react-redux.redux-thunk使用教程:本教程GitHub地址: https://github.com/chunhuigao/react-redux-thunk ...
编写react组件_React组件的“黄金法则”如何帮助您编写更好的代码
编写react组件以及钩子如何发挥作用 (And how hooks come into play) Recently I've adopted a new philosophy that chan ...
使用Flow检查React，Redux和React-Redux的全面指南
by Fabian Terh 由Fabian Terh 使用Flow检查React,Redux和React-Redux的全面指南 (A comprehensive guide to type chec ...

mapDispatchToProps

mapDispatchToProps相关推荐

最新文章

热门文章