乘'連接'與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

回答

相關問題