javascript - 为什么使用 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)

/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
    }
}

问题:有人能解释一下为什么操作创建者 signoutUser() 在被componentWillMount() 并且那个 Action 会神奇地被分派(dispatch)？

换句话说，我很困惑为什么没有dispatch调用，比如

dispatch(this.props.signoutUser())

或

dispatch({ type: UNAUTH_USER })

如redux docs所示.

Answer 1

dispatch(this.props.signoutUser())

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

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