react随笔
mapDispatchToProps()
mapDispatchToProps是connect函数的第二个参数,用来建立 UI 组件的参数到store.dispatch方法的映射。它定义了哪些用户的操作应该当作 Action,传给 Store。它可以是一个函数,也可以是一个对象。
是函数则会得到dispatch和ownProps(容器组件的props对象)两个参数。
const mapDispatchToProps = (
dispatch,
ownProps
) => {
return {
onClick: () => {
dispatch({
type: 'SET_VISIBILITY_FILTER',
filter: ownProps.filter
});
}
};
}
从上面代码可以看到,mapDispatchToProps作为函数,应该返回一个对象,该对象的每个键值对都是一个映射,定义了 UI 组件的参数怎样发出 Action。
是一个对象,它的每个键名也是对应 UI 组件的同名参数,键值应该是一个函数,会被当作 Action creator ,返回的 Action 会由 Redux 自动发出。
const mapDispatchToProps = {
onClick: (filter) => {
type: 'SET_VISIBILITY_FILTER',
filter: filter
};
}
如果传入对象,这其实是使用bindActionCreator
时的简写。
mapDispatchToProps如果是一个object,这个object所对应的value必须是actionCreator,这样redux里面会自动帮我们调用bindActionCreator。
bindActionCreator
bindActionCreator 的作用其实就是用来将一个对象的值是action creators转成一个同样key的对象,但是转化的这个对象的值,是将action creator包裹在dispatch里的函数。
//actionCreator.js
export function addTodo(text) {
return {
type: 'ADD_TODO',
text
}
}
export function removeTodo(id) {
return {
type: 'REMOVE_TODO',
id
}
}
//得到的对象为
{
addTodo : text =>
{
type: 'ADD_TODO',
text
},
removeTodo : id => {
type: 'REMOVE_TODO',
id
}
}
//经过bindActionCreator就会变成
{
addTodo : text => dispatch(addTodo('text'));
removeTodo : id => dispatch(removeTodo('id'));
}
相当于会dispatch这个action。
参数:
1、actionCretors 可以是一个对象,也可以是一个单个函数
2、dispatch函数
返回:
单个函数,或者是一个对象。
传入一个function
如果只是传入一个function,返回的也是一个function
例如:
const toggleTodo = (id) => {
return {
type: 'TOGGLE_TODO',
id
};
};
export { toggleTodo };
let boundActionCreators = bindActionCreators(toggleTodo, dispatch);
//此时boundActionCreators = (id) => dispatch(toggleTodo(id));
所以bindActionCreator比较简单:
1、判断传入的参数是否是object,如果是函数,就直接返回一个包裹dispatch的函数
2、如果是object,就根据相应的key,生成包裹dispatch的函数即可