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.这个整体方法是否正确，特别是在我定义连接的地方（在构造函数中？我见过的很多例子都定义了组件外部的连接，但是如果我在组件外部定义了这个，那么我就无法访问mapStateToPrope，和mapDispatchToProps，我认为应该在组件内部。

Answer 1

connect函数是high order component（HOC），不需要定义为类本身。 redux文档有一些examples如何做到这一点。他们使用的是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

将组件和单独的容器放在一起是一种很好的做法。它被称为演示和容器组件，您可以在此Medium post by the creator of Redux中阅读更多内容。但基本上我的想法是让你的mapStateToProps和mapDispatchToProps保持在你的组件之外，这将获得它作为道具所需的一切。

React Redux容器组件

3 个答案: