mapDispatchToProps和matchDispatchToProps之间有什么区别

Question

标题解释了这些问题.

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

在matchDispatchToProps中:

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

如果是mapDispatchToProps:

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

请解释一下这些之间的区别.

Answer 1

matchDispatchToProps不是标准参考react-redux.我将概述连接 HoC的工作原理.

该connect组织有四个参数; mapStateToProps,mapDispatchToProps,mergeProps,和options.在mapStateToProps您指定商店中要在组件内可用的信息时,如下所示:

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

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

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

注:updateUser是的actionCreater,你会作出.

然后,您可以将它们与connectHoC 一起使用,如下所示:

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

现在,您可以<MyConnectedComponent />在<MyComponent />代码中使用和访问({ user, updateUser })属性.

注意:connect也可以带null参数.connect()( Component )将dispatch作为道具在您的组件中提供.这是没有任何参数的默认设置.您还connect( null, mapDispatchToProps )( Component )可以updateUser在组件中制作道具,而无需将组件连接到商店.connect( mapStateToProps )( Component )如果您想user从商店访问,也可以不需要从组件中分派,也可以.

附加信息

[mergeProps(stateProps,dispatchProps,ownProps):props](功能):

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

[选项](对象)

如果指定,则进一步自定义连接器的行为.除了可传递给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):从哪里读取商店的上下文的键.如果您处于拥有多个商店的不可取的位置,您可能只需要这个.默认值:'store'

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

Answer 2

这里有两件事。

首先，connect()调用的第二个参数的专有名称mapDispatchToProps。也常称为mapDispatch。但是，像在JS任何函数调用，它什么并不重要，你叫你的变量-你可以调用你的函数mapDispatchToProps，mapDispatch，fred，或someFunctionName。（也就是说，我不知道为什么要调用它matchDispatchToProps，或者在哪里听到这个名字。）

其次，您的两个示例函数有很大的不同。mapDispatch函数的目的是返回一个对象，该对象中的每个键/值都将成为该组件的支持。通常，您将在该对象内返回绑定动作创建器函数，以便该组件将接收诸如的道具this.props.doSomeWork()。您的第一个示例做到了return bindActionCreators({selectUser}, dispatch)，将正确地做到这一点。

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

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

我们有一个arrow函数，该函数立即返回一个对象，但是看起来它试图dispatch立即调用，而不是在对象中声明键/值对。那根本无效。