2017-02-09 10 views
0

Ich möchte zusammen react-redux und react-geolocated verwenden. Booth Verwendung 'benannt' Export mit Export Standard.Multiply 'connect' mit react-redux

reagieren-redux connect Personal

const mapStateToProps = (state) => { 
    return { 
     json: state.json 
    } 
}; 

const mapDispatchToProps = (dispatch) => { 
    return { 
     someLocalMethod:() => dispatch(someRemoteMethod()), 
    } 
}; 

export default connect(mapStateToProps, mapDispatchToProps)(Home) 

reagieren-geolokalisiert Zusammenhang connect Personal

export default geolocated({ 
    positionOptions: { 
    enableHighAccuracy: false, 
    }, 
    userDecisionTimeout: 5000 
})(Home); 

Was ist die Art und Weise, diese beiden Export zu verschmelzen?

Antwort

1

Try this:

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

Es scheint, dass Ihre Lösung funktioniert gut. Gib mir etwas Zeit, um es zu testen;) – zappee

+2

Nur ein Kopf (wenn du das vorher nicht gesehen hast) :), dieses Muster ist ziemlich üblich, wenn du reagierst, wenn du noch nichts davon gehört hast, eine Höhere Ordnung Component (HOC) Im Grunde werden nur Aufrufe aneinandergekettet, um die Basiskomponente zu verbessern und ihr mehr Funktionalität zu verleihen. Schauen Sie sich Facebooks [HOC] (https://facebook.github.io/react/docs/higher-order-components.html) an. –

+0

Das HOC-Muster ist so elegant. Danke Jungs. – zappee

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