What is the difference between mapDispatchToProps and matchDispatchToProps

Question

The title explains the questions.

I am using redux to change state of users to active or in-active users.

In matchDispatchToProps:

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

In case of mapDispatchToProps :

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

Please explain the difference between these.

Answer 1

matchDispatchToProps isn't a standard reference in react-redux. I will give you an overview of how the connect HoC works.

The connect HoC takes four arguments; mapStateToProps, mapDispatchToProps, mergeProps, and options. In mapStateToProps you assign what information in your store you want to be available inside the component as follows:

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

In mapDispatchToProps you provide functions as props to your component that have access to the dispatch method of your store as follows:

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

Note: updateUser is an actionCreater you would have made.

You would then use them with the connect HoC as follows:

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

Now you can use <MyConnectedComponent /> and inside of the <MyComponent /> code you have access to the ({ user, updateUser }) properties.

Note: connect can take null arguments as well. connect()( Component ) will make dispatch available in your component as a prop. This is the default setting without any arguments. You can also connect( null, mapDispatchToProps )( Component ) to make updateUser a prop in the component without connecting the component to the store. You could also connect( mapStateToProps )( Component ) if you wanted access to user from the store, but had no need to dispatch from within the component.

Additional information

[mergeProps(stateProps, dispatchProps, ownProps): props] (Function):

If specified, it is passed the result of mapStateToProps(), mapDispatchToProps(), and the parent props. The plain object you return from it will be passed as props to the wrapped component. You may specify this function to select a slice of the state based on props, or to bind action creators to a particular variable from props. If you omit it, Object.assign({}, ownProps, stateProps, dispatchProps) is used by default.

[options] (Object)

If specified, further customizes the behavior of the connector. In addition to the options passable to connectAdvanced() (see those below), connect() accepts these additional options:

• [pure] (Boolean): If true, connect() will avoid re-renders and calls to mapStateToProps, mapDispatchToProps, and mergeProps if the relevant state/props objects remain equal based on their respective equality checks. Assumes that the wrapped component is a “pure” component and does not rely on any input or state other than its props and the selected Redux store’s state. Default value: true

• [areStatesEqual] (Function): When pure, compares incoming store state to its previous value. Default value: strictEqual (===)

• [areOwnPropsEqual] (Function): When pure, compares incoming props to its previous value. Default value: shallowEqual

• [areStatePropsEqual] (Function): When pure, compares the result of mapStateToProps to its previous value. Default value: shallowEqual

• [areMergedPropsEqual] (Function): When pure, compares the result of mergeProps to its previous value. Default value: shallowEqual

• [storeKey] (String): The key of the context from where to read the store. You probably only need this if you are in the inadvisable position of having multiple stores. Default value: 'store'

Complete documetion can be found at reactjs/react-redux.

Answer 2

Two things here.

First, the proper name of the second argument to connect() is called mapDispatchToProps. It is also frequently referred to as mapDispatch. But, like any function call in JS, it doesn't matter what you call your variable - you can call your function mapDispatchToProps, mapDispatch, fred, or someFunctionName. (That said, I have no idea why you're calling it matchDispatchToProps, or where you heard that name.)

Second, your two example functions there are very different. The intent of a mapDispatch function is to return an object, and each key/value in the object will become a prop for the component. Normally, you would return bound-up action creator functions inside that object, so that the component will receive props like this.props.doSomeWork(). Your first example, which does return bindActionCreators({selectUser}, dispatch), will correctly do that.

Your second example does not appear to be valid JS syntax:

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

We've got an arrow function that immediately returns an object, but instead of declaring key/value pairs in the object, it looks like it's trying to call dispatch immediately. That's not valid at all.