Question

在阅读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)

/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()调用时，动作创建者type: UNAUTH_USER只需返回带有componentWillMount()的动作对象，而该动作将神奇地出现被派遣？

换句话说，我很困惑为什么没有dispatch呼叫，例如

dispatch(this.props.signoutUser())

或

dispatch({ type: UNAUTH_USER })

如redux docs所示。

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

Answer 2

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

首先：未提供mapDispatchToProps

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

在上述情况下，如果不提供mapDispatchToProps，则会将调度道具传递给连接的组件，您可以使用该组件来分派动作。

其次：提供mapDispatchToProps作为功能

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

在上述情况下，您将在mapDispatchToProps内分派操作，该操作会将返回的值作为prop传递给组件

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

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

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

上述情况是第二种情况的简化版本，其中调度功能由react-redux内部处理

第三种情况是您间接使用的内容，因为当您导入动作时，例如

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

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

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

2 个答案: