对react-redux中的connect进行封装,使其避免多次写mapStateToProps,mapDispatchToProps之类的重复的逻辑;并且,可以按需引入我们需要用到的store中的内容,这里举例用的是main。该模块已经集成react-redux中的connect,不必单独下载。
$ npm install simple-redux-connect
before(之前我们这样做)
//需要Provider时,这样引入
import { Provider } from 'react-redux'
//引入connect和actionCreators
import { connect } from 'react-redux'
import actionCreators from '../../store/home/actionCreators'
const mapStateToProps = (state) => {
return {//返回需要的模块(这里是store中的main)中的属性
list: state.main.list
}
}
const mapDispatchToProps = (dispatch) => {
return {//返回actionCreators方法
getSwiperListAsync() {
dispatch(actionCreators.getSwiperListAsync())
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(UIcomponent)
now,we can(现在,我们这样做,是不是方便很多呢)bingo!
//需要Provider时,这样引入
import { Provider } from 'simple-redux-connect'
//引入我们封装的connect模块
import { connect } from 'simple-redux-connect'
//传入我们需要的模块,这里是(main)
export default connect(UIcomponent, [{name: 'main', state: ['list']}])//main:your store,list:your state
or
//需要Provider时,这样引入
import { Provider } from 'simple-redux-connect'
//引入我们封装的connect模块
import { connect } from 'simple-redux-connect'
//传入我们需要的模块,这里是(main)
export default connect(UIcomponent, [ 'main'])//main:your store