function cre(param){
return Array.from(arguments)
}
function component(param){
param = [1,2,3,4].concat(param)
console.log(param)
return param
}
function connect(param){
let {state:number} = param
return f=>{
f(cre(66,number))
}
}
console.log(connect({state:99})(component))
因为react-redux里面需要connect连接器进行连接,所以我写了connect高级函数,connect本身会返回一个函数小王,这个函数小王的参数是一个函数,connect的参数会合并到小王函数的内部,具体怎么合并看你自己
不知道读者有没有和我一样经常忘记action里面的两个参数 ({type:'类型',data:'参数'}),接下来就是reducer纯函数里的参数,(state,action),state是上一次数据,或者初始化数据两种角色,action里面有type,还有用到的action参数里面用到的,比如我写的data,所以可以理解为action这个参数其实是action里面这两个东西。
接下来说下react-redux中的connect的四个参数,第一个参数mapStateToProps,他是将store里面的数据转换为组件中可以通过this.props获取的属性
第二个参数mapDispatchToProps,他是将action转换为组件中可以通过this.props去使用
mergeProps
和options(后两个)
bindActionCreators源码解析
这个东西是什么呢?,是在你没有写action的时候,用的,先来看下我们单独分离出action.js的写法
export const initContentsAsync = (data)=>{
return dispatch=>{
dispatch(initContents(data))
}
}
比如咱们的初始化数据,那么可以想到这个bindActionCreators里面做的事,
function mapDispatchToProps(dispatch) {
return bindActionCreators({ actions.onIncrement }, dispatch);
}
她的用法就是这样,那么可想而知。源码里面他是进行了什么样的转换
function bindActionCreator(actionCreator, dispatch) {
// 这个函数的主要作用就是返回一个函数,当我们调用返回的这个函数的时候,就会自动的dispatch对应的action
// 这一块其实可以更改成如下这种形式更好
// return function(...args) {return dispatch(actionCreator.apply(this, args))}
return function() { return dispatch(actionCreator.apply(this, arguments)) }
}