Javascript 为什么使用返回函数调度React操作

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

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)

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（）

调用时必须返回类型为UNAUTH\u USER的动作对象，并且该动作将被神奇地调度吗

换句话说，我不明白为什么没有

dispatch

调用，比如

dispatch(this.props.signoutUser())

或

如图所示

这就是mapDispatchToProps在引擎盖下所做的。当您从signOutUser返回一个值（该值使用mapDispatchToProps映射到您的组件）时，会发生以下情况

dispatch(/* returned value */)

我们实际上使用了很多速记，却不知道引擎盖下发生了什么。例如，以下面的例子

const mapDispatchToProps = {
  signOutUser
}

与

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

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

---

您可以通过多种方式使用mapDispatchToProps或dispatch功能

首先：不提供mapDispatchToProps

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

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

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

在上述情况下，如果您不提供mapDispatchToProps，则会向连接的组件传递一个分派道具，您可以使用该组件分派操作

其次：提供mapDispatchToProps作为功能

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

在上述情况下，您将在mapDispatchToProps中调度操作，该操作将返回值作为道具传递给组件

第三：提供一个对象作为mapDispatchToProps

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

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

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

上述案例是第二个案例的简化版本，其中调度功能由react redux在内部处理

第三种情况是您间接使用的，因为当您导入操作时

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

---

操作

基本上是作为mapDispatchToProps传递的对象

这里是发生

魔术

的源代码。它们没有使用返回“函数”进行调度。您正在使用react-redux，可能应该从阅读一些文档开始，比如和，因为它回答了所有这些问题，就像文档有时做的那样：）

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

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

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