乘'连接'与react-redux
问题描述:
我想一起使用react-redux和react-geolocated。 展位使用'命名'出口出口默认。乘'连接'与react-redux
反应,Redux的连接工作人员
const mapStateToProps = (state) => {
return {
json: state.json
}
};
const mapDispatchToProps = (dispatch) => {
return {
someLocalMethod:() => dispatch(someRemoteMethod()),
}
};
export default connect(mapStateToProps, mapDispatchToProps)(Home)
反应-的地理定位相关的连接工作人员
export default geolocated({
positionOptions: {
enableHighAccuracy: false,
},
userDecisionTimeout: 5000
})(Home);
什么是这两个出口合并到一起的呢?
答
试试这个:
//file with geolocated stuff ------------------
...
export default geolocated({
positionOptions: {
enableHighAccuracy: false,
},
userDecisionTimeout: 5000
})(Home);
//file with react-redux connect stuff --------------
import geoHome from '/pathToGeolocatedHome';
...
export default connect(mapStateToProps, mapDispatchToProps)(geoHome)
答
import connect from 'react-redux-connect';
import { actionOne, actionTwo } from './actions';
export class MySmartComponent {
static mapStateToProps(state, ownProps) {
// if you need to map some data from store
return {
// some data from state here
};
}
static mapDispatchToProps(dispatch, ownProps) {
// if you need to dispatch some actions
return {
kactionOne,
actionTwo,
};
}
static mergeProps(stateProps, dispatchProps, ownProps) {
// if you want to merge props manually
return {
// ...
}
}
static connectOptions = {
// if you want to merge props manually
return {
// ...
}
}
static connectOptions = {
// if you want to merge props manually
return {
// ...
}
}
static connectOptions = {
// if you need to tweek some connect options
// e.g. pure: false
};
render() {
// return something...
}
}
// and just pass your component to `connect` function
// all settings will be taken from static props
export default connect(MySmartComponent);
看来你的解决方案正常工作。给我一点时间来测试它;) – zappee
只是一个头(如果你以前没有见过这个):),这种模式在使用反应时很常见,如果你还没有听说过它,称为高阶组件(HOC)它基本上只是将调用链接在一起,以改善您的基本组件以向其添加更多功能。看看facebooks [HOC](https://facebook.github.io/react/docs/higher-order-components.html)指南。 –
HOC格局非常优雅。感谢你们。 – zappee