Question

标题解释了这些问题。

我正在使用redux将用户状态更改为活动或活跃用户。

在matchDispatchToProps中：

function matchDispatchToProps(dispatch){
  return bindActionCreators({selectUser: selectUser}, dispatch);
}

如果是mapDispatchToProps：

const mapDispatchToProps = (dispatch) => ({
    dispatch({selectUser: selectUser})
})

请解释这些之间的区别。

Answer 1

matchDispatchToProps不是react-redux中的标准参考。我将概述connect HoC的工作原理。

connect HoC有四个参数; mapStateToProps，mapDispatchToProps，mergeProps和options。在mapStateToProps中，您可以在组件中指定要在组件中使用的信息，如下所示：

mapStateToProps = ( state ) => ({
    user: state.user
});

在mapDispatchToProps中，您为组件提供了可以访问商店dispatch方法的道具的功能，如下所示：

mapDispatchToProps = ( dispatch ) => ({
    updateUser: ( user ) => {
        dispatch( updateUser( user ) );
    }
});

注意：updateUser是您原来的actionCreater。

然后，您可以将它们与connect HoC一起使用，如下所示：

MyConnectedComponent = connect( mapStateToProps, mapDispatchToProps )( MyComponent );

现在，您可以使用<MyConnectedComponent />并在<MyComponent />代码内部访问({ user, updateUser })属性。

注意：connect也可以使用null个参数。 connect()( Component )会在您的组件中将dispatch作为道具提供。这是没有任何参数的默认设置。您还可以connect( null, mapDispatchToProps )( Component )在组件中创建updateUser prop，而无需将组件连接到商店。如果您希望从商店访问connect( mapStateToProps )( Component )，您也可以user，但无需从组件内发送。

其他信息

[mergeProps（stateProps，dispatchProps，ownProps）：props]（功能）：

如果指定，则传递mapStateToProps（），mapDispatchToProps（）和父道具的结果。从它返回的普通对象将作为props传递给包装组件。您可以指定此函数以基于props选择状态切片，或将动作创建者绑定到props中的特定变量。如果省略它，默认情况下使用Object.assign（{}，ownProps，stateProps，dispatchProps）。

[options]（Object）

如果指定，则进一步自定义连接器的行为。除了可传递给connectAdvanced()的选项（请参阅下面的内容）之外，connect（）还接受以下附加选项：

[pure]（Boolean）：如果为true，则connect（）将避免重新渲染并调用mapStateToProps，mapDispatchToProps和mergeProps，如果相关的state / props对象基于各自的相等性检查保持相等。假设包装组件是一个“纯”组件，并且不依赖于其道具和所选Redux商店状态之外的任何输入或状态。默认值：true
[areStatesEqual]（Function）：当为pure时，将传入的存储状态与其先前的值进行比较。默认值：strictEqual（===）
[areOwnPropsEqual]（Function）：当为pure时，将传入的props与之前的值进行比较。默认值：shallowEqual
[areStatePropsEqual]（Function）：当为pure时，将mapStateToProps的结果与其先前的值进行比较。默认值：shallowEqual
[areMergedPropsEqual]（Function）：当为pure时，将mergeProps的结果与其先前的值进行比较。默认值：shallowEqual
[storeKey]（String）：从哪里读取商店的上下文的键。如果您处于拥有多个商店的不可取的位置，您可能只需要这个。默认值：＆＃39;存储＆＃39;

完整的文档可以在reactjs/react-redux找到。

Answer 2

这里有两件事。

首先，connect()的第二个参数的正确名称为mapDispatchToProps。它也经常被称为mapDispatch。但是，就像JS中的任何函数调用一样，你调用你的变量并不重要 - 你可以调用你的函数mapDispatchToProps，{{1 }，mapDispatch或fred。（那就是说，我不知道你为什么要这么称呼 someFunctionName ，或者你听到这个名字。）

其次，你的两个示例函数有很大的不同。 matchDispatchToProps函数的目的是返回一个对象，该对象中的每个键/值将成为该组件的prop。通常，您将在该对象内返回绑定动作创建函数，以便该组件将接收mapDispatch之类的道具。你的第一个例子this.props.doSomeWork()会正确地做到这一点。

您的第二个示例似乎不是有效的JS语法：

return bindActionCreators({selectUser}, dispatch)

我们有一个箭头函数可以立即返回一个对象，但它不是在对象中声明键/值对，而是试图立即调用const mapDispatchToProps = (dispatch) => ({ dispatch({selectUser: selectUser}) })。这根本无效。

Answer 3

我相信您一定已经从Bucky的ReactJS和Redux教程中听说过matchDispatchToProps一词。

此功能的通用名称实际上是mapDispatchToProps。

但是我不会说Bucky犯了一个错误，因为实际上，只要您将相同的名称传递给connect()方法的第二个参数，就可以调用该函数。

示例：

const mapDispatchToProps = (dispatch) => {
  return bindActionCreators({selectUser}, dispatch);
}

const mapStateToProps = (state) => {
  return {
    user: state.user,
  }
}

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

如果您没有将状态映射到道具，则第一个参数可以为null

示例：

const mapDispatchToProps = (dispatch) => {
  return bindActionCreators({selectUser}, dispatch);
}

export default connect(null, mapDispatchToProps)(myComponent);

Answer 4

这是一个很好的问题，以提醒我们，作为开发人员，我们有时会在做了这么长时间后有时将约定与需求相混淆。

从技术上讲，我们可以将其命名为我们想要的任何东西，它不一定是mapStateToProps或mapDispatchToProps，但是按照惯例，这就是我们所说的名称，因为当我们拥有此名称时，它会使我们的工作变得更轻松一致性级别。

因此，唯一的区别在于命名约定，它们不是内置函数，它们彼此之间唯一地执行特定的操作。实际上，后者不是常规使用的，我指的是您的matchDispatchToProps，但是您一定可以使用它。

mapDispatchToProps和matchDispatchToProps之间有什么区别

4 个答案: