相关疑难解决方法(0)

在我的redux容器中,我必须从商店中发送相当复杂的操作,从中获取大量属性.如果不破坏性能,我找不到合适的模式来解决问题.

我们以一个只包含Send按钮发送消息的容器为例:

(对于这样一个小例子,以下任何一种方法都能很好地工作,我只是想说明我在更大容器中遇到的问题.)

天真的方法 - 将所有参数传递给组件

function mapStateToProps(state) {
  return {
    user:           selectors.selectedUser(state),
    title:          selectors.title(state),
    message:        selectors.message(state),
  };
}

function dispatchProps(state) {
  return {
    onClickSend: function(user, title, message) {
      actions.sendMessage({user, title, message});
    }
  };
}

如果我这样做,我的简单发送按钮必须知道很多无用的属性:

SendBtn.propTypes = {
  user:               PropTypes.string,
  title:              PropTypes.string,
  message:            PropTypes.string,
  onClickSend:        PropTypes.func,
}

并且还要使用所有这些道具调用onClickSend:

  onClickSend(user, title, message)

这对于发送按钮来说太过分了.按钮应该只知道它onClickSend在我们点击它时必须调用,这个组件是一个简单的按钮.它不应该知道任何其他道具.此外,在更复杂的情况下,它可能不仅仅需要2个道具(标题和消息),而是5或10.

另一个问题是性能,每次我要修改消息或标题(每次击键时===),发送按钮将被重新渲染.

我目前的方法 - 使用mergeProps将参数传递给操作

我的应用程序当前使用的当前方法是依赖mergeProps:

function mapStateToProps(state) {
  return {
    user:           selectors.selectedUser(state),
    title:          selectors.title(state),
    message:        selectors.message(state),
  };
}

function mergeProps(stateProps, dispatchProps, ownProps) {

  const {user, …