Why are React Actions dispatched using a Return function

Question

While reading through a React/Redux boilerplate, I came across the following code snippet

import React, { Component } from 'react'
import { connect } from 'react-redux'
import * as actions from '../../actions'
class Signout extends Component {

    componentWillMount() {
        this.props.signoutUser()
    }

    render() {
        return <div>Bye Bye</div>
    }
}

export default connect(null, actions)(Signout)

/actions/index/js

import axios from 'axios'
import { UNAUTH_USER, AUTH_USER, AUTH_ERROR, FETCH_MESSAGE } from './types'
const ROOT_URL = 'http://localhost:3090'

export function signoutUser() {
    localStorage.removeItem('token')
    return {
        type: UNAUTH_USER
    }
}

Question: Can someone explain why the action creator signoutUser() simply have to return the action object with type: UNAUTH_USER when called by componentWillMount() and that action will magically be dispatched?

In other words, I am confused why there is no dispatch call, such as

dispatch(this.props.signoutUser())

or

dispatch({ type: UNAUTH_USER })

as shown in the redux docs.

They're not dispatched with a return "function". You're using react-redux and should probably start by reading some of the docs, like https://github.com/reduxjs/react-redux/blob/master/docs/GettingStarted.md and https://github.com/reduxjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options since it answers all these questions, as docs sometimes do :) — Dave Newton, Sep 26 '18 at 15:14

Shubham Gupta · Answer 1 · 2018-09-26T15:23:06.890

dispatch(this.props.signoutUser())

This is what mapDispatchToProps is doing under the hood. When you return a value from signOutUser, which is mapped to your component using mapDispatchToProps, the following happens

dispatch(/* returned value */)

There are a lot of shorthands we use actually without knowing what is happening under the hood. For example, take the following

const mapDispatchToProps = {
  signOutUser
}

is same as

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ addTodo }, dispatch)
}

As suggested in comments I think you take a look at mapDispatchToProps, bindActionCreators implementation which can be found in following links

https://github.com/reduxjs/react-redux/blob/3e53ff96ed10f71c21346f08823e503df724db35/src/connect/mapDispatchToProps.js

https://github.com/reduxjs/redux/blob/master/src/bindActionCreators.js

Here is the source code of where the `magic` happens. https://github.com/reduxjs/react-redux/blob/master/src/connect/mapDispatchToProps.js — dance2die, Sep 26 '18 at 15:14

score 3 · Answer 2 · answered Sep 26 '18 at 15:21

There are multiple ways in which you can use mapDispatchToProps or the dispatch functionality

Firstly: Without providing mapDispatchToProps

...
componentWillMount() {
    dispatch(signoutUser())
}
...
export default connect(null)(Signout);

In the above case, if you don't provide mapDispatchToProps, a dispatch prop is being passed to the connected component which you can use to dispatch the action.

Secondly: Providing mapDispatchToProps as function

...
componentWillMount() {
    dispatch(signoutUser())
}
...
const mapDispatchToProps = (dispatch) => {
     return {
          signoutUser: () => dispatch(signoutUser)
     }
}
export default connect(null, mapDispatchToProps)(Signout);

In the above case, you are dispatch the action within the mapDispatchToProps which passes the returned value as props to the component

Thirdly: providing an object as mapDispatchToProps

...
componentWillMount() {
    dispatch(signoutUser())
}
...
const mapDispatchToProps =  {
     return {
          signoutUser
     }
}

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

The above case is the shortened version of the second case wherein the dispatch functionality is internally handled by react-redux

The third case is what you are using indirectly, since when you import the actions, like

import * as actions from '../../actions';

actions is basically and object which is being passed as mapDispatchToProps

Why are React Actions dispatched using a Return function

2 Answers2