React Redux 容器组件

Posted 2023-02-23

【中文标题】React Redux 容器组件

【英文标题】：React Redux container component

【发布时间】：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。

【参考方案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 保留在组件之外，这将接收它所需的一切作为道具。