React-Redux：在 React 组件中使用动作创建器

Question

我是 React/Redux 的新手，感谢您的帮助。我正在参加有关此主题的 Udemy 课程。课程讲师创建这样的组件。

import React, { Component } from 'react';
import { connect } from 'react-redux';

import { fetchUser } from '../actions';

class User extends Component {
    componentDidMount(){
        this.props.fetchUser(this.props.userId);
    }

    render(){
        const { user } = this.props;

        if(!user) return null;

        return(
            <div className="header"> User Info: {user.name}</div>
        );
    }
}

const mapStateToProps = (state, ownProps) => {
    return { user: state.users.find( user => user.id === ownProps.userId)};
};

export default connect(mapStateToProps, { fetchUser })(User)

我的问题：为什么在componentDidMount() 中他在fetchUsers() 前面加上this.props？ 并非他将fetchUsers() 作为来自父组件的道具传递。这就是父级使用这个组件的方式<User userId={post.userId}/>

注意：此代码有效

Answer 1

正是因为这一行：

export default connect(mapStateToProps, { fetchUser })(User)

connect 的第二个参数叫做mapDispatchToProps，它将动作添加到道具中

来自docs：

connect 可以接受一个名为 mapDispatchToProps 的参数，它允许 您创建在调用时调度的函数，并传递那些 用作组件的道具。

const mapDispatchToProps = dispatch => {
  return {
    // dispatching plain actions
    increment: () => dispatch({ type: 'INCREMENT' }),
    decrement: () => dispatch({ type: 'DECREMENT' }),
    reset: () => dispatch({ type: 'RESET' })
  }
}

您的代码使用“对象速记”形式。

Answer 2

示例中的mapDispatchToProps 是简写方式。如果它是这样写的，可能会更容易判断发生了什么：

import React, { Component } from 'react';
import { connect } from 'react-redux';

import { fetchUser } from '../actions';

class User extends Component {
    componentDidMount(){
        this.props.fetchUser(this.props.userId);
    }

    render(){
        const { user } = this.props;

        if(!user) return null;

        return(
            <div className="header"> User Info: {user.name}</div>
        );
    }
}

const mapStateToProps = (state, ownProps) => {
    return { user: state.users.find( user => user.id === ownProps.userId)};
};

const mapDispatchToProps = () => ({
  fetchUser
});

export default connect(mapStateToProps, mapDispatchToProps)(User)

也许这显示得更清楚，但调度函数 (fetchUser) 正在映射到组件属性。就像状态值（用户）被映射到组件的属性一样。我认为您只是因为使用了速记而感到困惑。