移动处理函数以外的反应组分(Moving handler functions outside of

我创造，我想在我的应用程序做出反应使用可重复使用的日期选择器组件。我快到的问题是指在用户交互得到所谓的处理功能是相同的在每一个阵营组成部分，我用我的日期选择器。这意味着我需要将其移动到外部文件。

现在的问题是，一旦我动帖功能，这不是一个阵营组件外部文件，我将如何访问这些存储和调度功能？

做了一些研究和跨使用中间件的灵光乍现，但据我所知中间件应该是行动的创作者和减速器之间犹豫。在这种特殊情况下，我只是提出我的处理函数到一个外部文件，在行动创造者和减速器之间没有真正插入任何内容。

我说，我的外部文件看起来像这样：

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

// Import actions
import * as myActions from '../actions/myActions';

export const handleChangeDecadeStart = (datePickerId, value) => {

   // Get current decade start
   const currentDecadeStart = this.props.decadeStart;

   // Set new decade start value
   if(value === "prev") {
         return this.props.actions.setDecadeStart(datePickerId, currentDecadeStart - 10);  
   } else {
         return this.props.actions.setDecadeStart(datePickerId, currentDecadeStart + 10);  
   }
}

export const setDate = (datePickerId, value) => {

   return this.props.actions.setDate(datePickerId, value);
}

function mapStateToProps(state) {

    return {
        decadeStart: state.calendars.decadeStart,
    };
}

function mapDispatchToProps(dispatch) {

    return {
        actions: bindActionCreators(myActions, dispatch)
    };
}

connect(mapStateToProps, mapDispatchToProps)(???);

我想那种修改看起来像一个阵营成分有什么事情，我真的不知道，如果这是有道理的。我感到特别困惑的connect处底线。

下面是你处理这两种方法。首先是讨好，这是你的包裹事件处理成需要的功能this.props并允许内部事件处理程序来使用它们。例如，在您的handleChangeDecadeStart功能，你可以这样做：

const handleChangeDecadeStart = props => (datePickerId, value) => {

  // Get current decade start
  const currentDecadeStart = this.props.decadeStart;

  // Set new decade start value
  if(value === "prev") {
     return this.props.actions.setDecadeStart(datePickerId, 
    currentDecadeStart - 10);  
  } else {
     return this.props.actions.setDecadeStart(datePickerId, 
    currentDecadeStart + 10);  
  }
}

然后在组件的渲染功能，你会这样：

return (
   <YourComponent onChangeDecadeStart={handleChangeDecadeStart(this.props)}/>
)

这样的事件处理程序将有机会获得this.props实际上不存在的类中。

在最后的连接线下实体店连接到你的类，所以它应该得到你的阵营组件类作为这样的最终参数：

connect(mapStateToProps, mapDispatchToProps)(MyReactComponent)

第二，在我看来最好的方法是使用一个高阶组件。一个HOC是就像连接功能，这需要一个组件并返回一个组件包裹它增加了一些功能的功能。示例实现：

const wrapWithHandlers = Component => class Wrapper extends Component {
  handleChangeDecadeStart = (datePickerId, value) => {

     // Get current decade start
     const currentDecadeStart = this.props.decadeStart;

     // Set new decade start value
     if(value === "prev") {
       return this.props.actions.setDecadeStart(datePickerId, currentDecadeStart - 10);  
     } else {
       return this.props.actions.setDecadeStart(datePickerId, currentDecadeStart + 10);  
     }
  }

  render() {
    return <Component onChangeDecadeStart={this.handleChangeDecadeStart} {...this.props} />
  }
}

然后，在导出类时，你会做这样的事情：

export default wrapWithHandlers(MyComponent)

该功能将您的包裹组件与高阶组件，它为它提供所需的处理程序，并与其他组件可以重新使用它。在你的情况，不过，你也可以使用连接，因此您的代码将是：

export default connect(mapStateToProps, mapDispatchToProps)(wrapWithHandlers(MyComponent))

调用函数调用函数等功能的这种模式..调用的函数组成，它可以更好地利用在终极版中构建功能，在这种情况下，你的代码将表示为：

import { compose } from 'redux'
...
const enhancer = compose(connect(mapStateToProps, mapDispatchToProps), wrapWithHandlers);

export default enhancer(MyComponent);

相反，这样做你自己，虽然，有很多图书馆的外面，为您提供这种HOC的外的开箱，重新构图是一个很好的例子。看看他们withHandlers功能，为您提供您所需要的确切功能。