Redux的派遣行動

Question

我有以下的容器組件

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

正如你可以在我的容器組件的登錄方法傳承到LoginComponent渲染（）方法，它是一種演示文稿看零件。這個想法是

1. 用戶點擊登錄呈現組件
2. 呈現組件調用登錄上面給出的容器組件上的方法上按鈕。
3. 容器組件將執行登錄（此方法將連接到實際的數據庫並對用戶進行身份驗證），然後調用通過connect（）方法傳入的onLoginClick方法（mapDispatchToProps）。但是，當我嘗試訪問this.props.onLoginClick時，在LoginContainerComponent的登錄方法中，this.props返回null。我在這裏做錯了嗎？

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

這是必需的，因爲如果您只將該功能傳遞給組件，則該組件不再可用。但是如果你「強制」 - 綁定到可用的方法。

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

這也繞過了需要bind你容器的login功能。