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);