将“连接”与 react-redux 相乘答案

【问题标题】：multiply 'connect' with react-redux将“连接”与 react-redux 相乘
【发布时间】：2017-06-27 16:39:55
【问题描述】：

我想同时使用 react-redux 和 react-geolocated。 Booth 使用带有 export default 的“命名”导出。

react-redux 连接人员

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

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

export default connect(mapStateToProps, mapDispatchToProps)(Home)

react-geolocated 相关连接人员

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

这两个导出合并在一起的方法是什么？

【问题讨论】：

标签： javascript reactjs react-redux

【解决方案1】：

试试这个：

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

【讨论】：

看来您的解决方案运行良好。给我一点时间来测试它；）
提醒一下（如果你以前没见过这个）:)，这种模式在使用 react 时很常见，如果你还没有听说过它，称为高阶组件 ( HOC）它基本上只是将调用链接在一起以改进您的基本组件以向其添加更多功能。看看 facebooks HOC 指南。
HOC 模式是如此优雅。谢谢你们。

【解决方案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);

【讨论】：