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）已映射到组件属性。就像状态值（用户）被映射到组件的属性一样。我认为您只是因为使用了速记而感到困惑。

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

2 个答案: