react随笔

2019-09-28  本文已影响0人  D_R_M

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的函数即可

上一篇下一篇

猜你喜欢

热点阅读