来自容器组件的Redux分派操作

我有以下容器组件

import { connect } from "react-redux";
import LoginComponent from "./Login";
import React from "react";

export class LoginContainerComponent extends React.Component {

    constructor( props ) {
        super( props )
    }

    login( username, password ) {
        //Perform actual login here
        this.props.onLoginClick();
    }

    render() {
        return (<LoginComponent onLoginClick = {this.login} />);
    };
}

const mapStateToProps = function ( state ) {
    return {
        currentState: 'Logged Out'
    }
};

const mapDispatchToProps = function ( dispatch ) {
    return {
        onLoginClick: () => {
            alert( 'login clicked' );
        }
    }
};

export default connect( mapStateToProps, mapDispatchToProps )( LoginContainerComponent );

从“react redux”导入{connect}；
从“/Login”导入LoginComponent；
从“React”导入React；
导出类LoginContainerComponent扩展React.Component{
建造师（道具）{
超级（道具）
}
登录（用户名、密码）{
//在此处执行实际登录
this.props.onLoginClick（）；
}
render（）{
返回（）；
};
}
const mapStateToProps=函数（状态）{
返回{
当前状态：“已注销”
}
};
const mapDispatchToProps=功能（调度）{
返回{
onLoginClick:（）=>{
警报（'login clicked'）；
}
}
};
导出默认连接（MapStateTops、mapDispatchToProps）（LoginContainerComponent）；

正如您在render（）方法中看到的，我将容器组件的login方法传递给LoginComponent，它是一个表示组件。这个想法是

用户单击演示组件上的登录按钮

表示组件调用上面给定的容器组件上的登录方法

容器组件将进行登录（此方法将连接到实际数据库并对用户进行身份验证），然后调用通过connect（）方法传入的onLoginClick方法（mapDispatchToProps）。但是，在LoginContainerComponent的登录方法中，当我尝试访问this.props.onLoginClick时，this.props返回null。我做错什么了吗

---

在构造内部，必须将此绑定到登录方法

import { connect } from "react-redux";
import LoginComponent from "./Login";
import React from "react";

export class LoginContainerComponent extends React.Component {

    constructor( props ) {
        super( props )

        this.login = this.login.bind(this);
    }

    login( username, password ) {
        //Perform actual login here
        this.props.onLoginClick();
    }

    render() {
        return (<LoginComponent onLoginClick = {this.login} />);
    };
}

const mapStateToProps = function ( state ) {
    return {
        currentState: 'Logged Out'
    }
};

const mapDispatchToProps = function ( dispatch ) {
    return {
        onLoginClick: () => {
            alert( 'login clicked' );
        }
    }
};

export default connect( mapStateToProps, mapDispatchToProps )( LoginContainerComponent );

从“react redux”导入{connect}；
从“/Login”导入LoginComponent；
从“React”导入React；
导出类LoginContainerComponent扩展React.Component{
建造师（道具）{
超级（道具）
this.login=this.login.bind（this）；
}
登录（用户名、密码）{
//在此处执行实际登录
this.props.onLoginClick（）；
}
render（）{
返回（）；
};
}
const mapStateToProps=函数（状态）{
返回{
当前状态：“已注销”
}
};
const mapDispatchToProps=功能（调度）{
返回{
onLoginClick:（）=>{
警报（'login clicked'）；
}
}
};
导出默认连接（MapStateTops、mapDispatchToProps）（LoginContainerComponent）；

---

这是必需的，因为如果您只将函数传递给组件，那么这将不再可用。但是，如果您“强制”-绑定到该方法，它是可用的

在构造内部，必须将此绑定到登录方法

import { connect } from "react-redux";
import LoginComponent from "./Login";
import React from "react";

export class LoginContainerComponent extends React.Component {

    constructor( props ) {
        super( props )

        this.login = this.login.bind(this);
    }

    login( username, password ) {
        //Perform actual login here
        this.props.onLoginClick();
    }

    render() {
        return (<LoginComponent onLoginClick = {this.login} />);
    };
}

const mapStateToProps = function ( state ) {
    return {
        currentState: 'Logged Out'
    }
};

const mapDispatchToProps = function ( dispatch ) {
    return {
        onLoginClick: () => {
            alert( 'login clicked' );
        }
    }
};

export default connect( mapStateToProps, mapDispatchToProps )( LoginContainerComponent );

从“react redux”导入{connect}；
从“/Login”导入LoginComponent；
从“React”导入React；
导出类LoginContainerComponent扩展React.Component{
建造师（道具）{
超级（道具）
this.login=this.login.bind（this）；
}
登录（用户名、密码）{
//在此处执行实际登录
this.props.onLoginClick（）；
}
render（）{
返回（）；
};
}
const mapStateToProps=函数（状态）{
返回{
当前状态：“已注销”
}
};
const mapDispatchToProps=功能（调度）{
返回{
onLoginClick:（）=>{
警报（'login clicked'）；
}
}
};
导出默认连接（MapStateTops、mapDispatchToProps）（LoginContainerComponent）；

---

这是必需的，因为如果您只将函数传递给组件，那么这将不再可用。但是，如果您“强制”-绑定到该方法，它是可用的

react-redux可以为您提供这种类型的东西，而无需使用

connect

函数中很少使用的第三个参数创建自己的容器类：

mergeProps

import { connect } from "react-redux";
import LoginComponent from "./Login";
import React from "react";

const mapStateToProps = function ( state ) {
    return {
        currentState: 'Logged Out'
    }
};

const mapDispatchToProps = function ( dispatch ) {
    return {
        onLoginClicked: () => {
            alert( 'login clicked' );
        }
    }
};

const mergeProps = function ( stateProps, dispatchProps ) {
    return {
        ...stateProps,
        onLoginClicked: (username, password) -> {
            //Perform actual login here
            dispatchProps.onLoginClicked()
        }
    }
};

export default connect( mapStateToProps, mapDispatchToProps, mergeProps )( LoginComponent );

---

这也不需要绑定容器的

登录
功能。
react-redux可以为您提供这类功能，而无需使用
connect
函数中很少使用的第三个参数创建自己的容器类：
mergeProps

import { connect } from "react-redux";
import LoginComponent from "./Login";
import React from "react";

const mapStateToProps = function ( state ) {
    return {
        currentState: 'Logged Out'
    }
};

const mapDispatchToProps = function ( dispatch ) {
    return {
        onLoginClicked: () => {
            alert( 'login clicked' );
        }
    }
};

const mergeProps = function ( stateProps, dispatchProps ) {
    return {
        ...stateProps,
        onLoginClicked: (username, password) -> {
            //Perform actual login here
            dispatchProps.onLoginClicked()
        }
    }
};

export default connect( mapStateToProps, mapDispatchToProps, mergeProps )( LoginComponent );

这也绕过了绑定容器的
login
功能的需要