乘'连接'与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);

什么是这两个出口合并到一起的呢？

来源

2017-02-09 zappee

试试这个：

//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)

来源

2017-02-09 15:31:27

看来你的解决方案正常工作。给我一点时间来测试它;） – zappee

只是一个头（如果你以前没有见过这个）:)，这种模式在使用反应时很常见，如果你还没有听说过它，称为高阶组件（HOC）它基本上只是将调用链接在一起，以改善您的基本组件以向其添加更多功能。看看facebooks [HOC]（https://facebook.github.io/react/docs/higher-order-components.html）指南。 –

HOC格局非常优雅。感谢你们。 – zappee

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);

来源

2017-02-09 15:55:41

乘'连接'与react-redux

回答

相关问题