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. Представления компонентов вызовов метода регистрации на компоненте Container приведенной выше.
3. Контейнерный компонент выполнит вход в систему (этот метод будет подключаться к фактической базе данных и аутентифицировать его пользователя), а затем вызвать метод onLoginClick (mapDispatchToProps), переданный через метод connect(). Однако в методе входа в LoginContainerComponent, когда я пытаюсь получить доступ к this.props.onLoginClick, 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

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

Это также обходит необходимость bindlogin функцию из вас контейнера.