React Redux 容器组件答案

【问题标题】：React Redux container componentReact Redux 容器组件
【发布时间】：2017-07-06 12:41:12
【问题描述】：

我正在编写一个简单的 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（和我认为应该在组件内部的 mapDispatchToProps。

【问题讨论】：

标签： reactjs redux components

【解决方案1】：

给你。

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

【讨论】：

【解决方案2】：

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)

【讨论】：

【解决方案3】：

拥有组件和单独的容器是一个很好的做法。它被称为 Presentational 和 Container 组件，您可以在 Medium post by the creator of Redux 中阅读更多内容。但基本上这个想法是你将 mapStateToProps 和 mapDispatchToProps 保留在组件之外，这将接收它所需的一切作为道具。

【讨论】：