Question

所以我有以下内容：

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

const mapDispatchToProps = (
  dispatch,
  ownProps
) => {
  return {
    handleSubmit: (event) => {
      event.preventDefault();
      // access messages as defined in mapStateToProps here
    }
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Contact);

关于在messages回调中访问mapStateToProps（如handleSubmit中所定义）的想法？或关于如何访问mapStateToProps中定义的道具的一般想法？

Answer 1

试试这个：

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

const mapDispatchToProps = (dispatch,ownProps) => {
  return {
    handleSubmit: (event,messages) => {
      event.preventDefault();
      // access messages as defined in mapStateToProps here
    }
  }
}

function mergeProps(stateProps, dispatchProps, ownProps) {
  return Object.assign({}, ownProps, stateProps, {
    handleSubmit: (event) => dispatchProps.handleSubmit(event, stateProps.messages)
  })
}

export default connect(
  mapStateToProps,
  mapDispatchToProps,
  mergeProps,
)(Contact);

Answer 2

mapDispatch函数没有给出mapState的输出。这是一个主要基于性能的设计决策。如果要根据状态编写调度逻辑，可以选择以下几种方法：

将必要的数据传递到组件的回调函数，例如this.props.someActionCreator(this.props.someData)。
使用类似redux-thunk的内容来编写可以访问整个商店状态的动作创建者
connect函数确实有一个很少使用的第三个参数mergeProps。如果您提供该函数，它将使用mapState和mapDispatch的输出进行调用，您可以使用它来生成依赖于mapState输出的函数。这通常会导致频繁创建新功能，并可能成为性能问题。
新的React-Redux@5.0.0-beta版本完全重写了connect实现。在内部，它使用新的connectAdvanced函数，该函数将作为新API公开。您可以将connectAdvanced用于此用例。

Redux Prop传球

2 个答案: