来自容器组件的 Redux 调度操作答案

【问题标题】：Redux dispatch actions from container component来自容器组件的 Redux 调度操作
【发布时间】：2017-07-08 12:07:30
【问题描述】：

我有以下容器组件

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 );

正如您在 render() 方法中看到的那样，我将容器组件的登录方法传递给作为表示组件的 LoginComponent。这个想法是

用户单击演示组件上的登录按钮
Presentation 组件在上面给出的 Container 组件上调用 login 方法。
容器组件会做登录（这个方法会连接到实际的数据库并验证他的用户）然后调用通过connect()方法传入的onLoginClick方法（mapDispatchToProps）。但是，当我尝试访问 this.props.onLoginClick 时，在 LoginContainerComponent 的登录方法中，this.props 返回 null。我在这里做错了什么吗？

【问题讨论】：

标签： redux components

【解决方案1】：

在您的构造中，您必须将此绑定到您的登录方法。

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 );

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

【讨论】：

【解决方案2】：

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 );

这也绕过了你容器的bindlogin函数的需要。

【讨论】：