React Redux容器组件

Question

我正在编写一个简单的React + Redux容器组件。 下面给出的是代码

export default class LoginContainerComponent extends React.Component {

    constructor() {
        super();
        connect( this.mapStateToProps, this.mapDispatchToProps )( LoginComponent )
    }

    render() {
        return (<LoginComponent></LoginComponent>);
    }

    mapStateToProps( state ) {
        return {
            loginText: 'Login'
            ,
            registerText: 'Register'
        }
    }

    mapDispatchToProps( dispatch ) {
        return {
            onLoginClick: () => {
                alert( 'login clicked' );
            },
            onRegisterClick: () => {
                alert( 'register clicked' );
            }
        }
    };
 }

我对此有一些疑问。1.这种整体方法是否正确，特别是在构造函数中定义connect（的地方？）我看到的许多示例都在组件外部定义了connect，但是如果我在组件外部定义了connect，那么我没有访问mapStateToPrope和mapDispatchToProps的权限，我认为它们应该在组件内部。

Answer 1

connect函数是一个高阶组件 （HOC），不需要将其定义为类本身。 redux文档包含一些如何执行此操作的示例 。 他们使用的是ES6语法，您可能不会使用，因此以下内容对您来说是等效的。

function mapStateToProps(state) {
    return {
        loginText: 'Login'
        ,
        registerText: 'Register'
    }
}

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

export default connect(mapStateToProps, mapDispatchToProps)(LoginComponent)

Answer 2

干得好。

class LoginContainerComponent extends React.Component {

    constructor(props) {
        //you actually dont need this atm
        super(props);
    }

    render() {
        return (<LoginComponent></LoginComponent>);
    }
 }

const mapStateToProps = state => ({
    loginText: 'Login',
    registerText: 'Register'
});

const mapDispatchToProps = dispatch => ({
    onLoginClick: () => alert('login clicked'),
    onRegisterClick: () => alert('register clicked')
});

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

Answer 3

最好有一个组件和一个单独的容器。 它称为Presentational and Container组件，您可以在Redux的创建者的这篇Medium文章中阅读更多内容。 但是从根本上说，您的想法是将mapStateToProps和mapDispatchToProps在组件之外，该组件将接收作为道具所需的一切。