为什么使用Return函数调度React Actions

Question

在阅读React/Redux样板文件时,我遇到了以下代码片段

/components/auth/signout.js

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)

/动作/指数/ 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
    }
}

问题:有人可以解释为什么动作创建者signoutUser()只需要type: UNAUTH_USER在被调用时返回动作对象,componentWillMount()并且该动作将被神奇地分派？

换句话说,我很困惑为什么没有dispatch电话,比如

dispatch(this.props.signoutUser())

要么

dispatch({ type: UNAUTH_USER })

如redux文档中所示.

Answer 1

dispatch(this.props.signoutUser())

这就是mapDispatchToProps在幕后所做的事情.当您从signOutUser返回一个值,该值使用mapDispatchToProps映射到您的组件时,会发生以下情况

dispatch(/* returned value */)

我们实际上使用了很多简写,而不知道幕后发生了什么.例如,请执行以下操作

const mapDispatchToProps = {
  signOutUser
}

和...一样

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

正如评论中所建议的那样,我想你看看mapDispatchToProps,bindActionCreators实现,可以在以下链接中找到

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

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