multiply 'connect' with react-redux

Question

I would like to use together react-redux and react-geolocated . Booth use 'named' export with export default .

react-redux connect staff

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

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

export default connect(mapStateToProps, mapDispatchToProps)(Home)

react-geolocated related connect staff

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

What is the way to merge together these two export?

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

Answer 2

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