刚接触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
}
}
}
action.decrease = function (info) {
return {
{
type:'DECREASE',
info
}
}
}
const mapDispatchToProps = (dispatch, ownProps) => {
return {
increase: (...args) => dispatch(actions.increase(...args)),
decrease: (...args) => dispatch(actions.decrease(...args))
}
}
//然后,定义这个组件的 Reducer。
const App = connect(
mapStateToProps,
mapDispatchToProps
)(Counter)//会将mapStateToProps和mapDispatchToProps中返回的变量通过props传到容器Counter中
//定义一个容器
class Counter extends Component {
render() {
const { value, onIncreaseClick } = this.props
return (
<div>
<span>{value}</span>
<button onClick={onIncreaseClick}>Increase</button>
</div>
)
}
}
// Reducer
function counter(state = { count: 0 }, action) {
const count = state.count
switch (action.type) {
case 'INCREASE':
return { count: count + 1 }
case 'DECREASE':
return { count: count - 1 }
default:
return state
}
}
- 调用actions.increase()只能得到一个 action对象
{type:'INCREASE'}
,要触发这个 action 必须 在store 上调用 dispatch 方法。 diapatch正是 mapDispatchToProps的第一个参数。但是,为了不让 组件感知到 dispatch 的存在,我们需要将increase 和 decrease 两个函数包装一下,使之成为直接可被调用的函数(即,调用该方法就会触发 dispatch )。