Run function managed by Redux

Question

My app React Native is managed by Redux. I need to perform the function _verificaLogin() coming by connect automatically when my app is rendering. The way I did it’s not working, I think the props did not receive the function yet when I make the call by componentDidMount.

follows the code:

class Login extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        email: '',
        senha: ''
    };
}

componentDidMount() {
    this._verificaLogin();
}

_verificaLogin() {
    const { email, senha } = this.state;
    this.props.verificaLogin();
}

render() {
    return (
        <View style={ styles.container }>
            <StatusBar backgroundColor={ '#303F9F' } />

            <TextInput style={ styles.input } placeholder={ "Email" }
                       value={ this.state.email }
                       onChangeText={ email => this.setState({ email }) }/>

            <TextInput style={ styles.input } placeholder={ "Senha" }
                       value={ this.state.senha }
                       onChangeText={ senha => this.setState({ senha })}/>

            <Text style={{ color: 'red', height:45 }}>{ this.props.message }</Text>

            <View style={{ marginTop: 24 }}>
                <View style={ styles.bt }>
                    <Button style={ styles.input } title={ "ENTRAR" } color={ '#3f51b5' }
                            onPress={ () => this._verificaLogin() }/>
                </View>

                <View style={ styles.bt }>
                    <Button style={ styles.input } title={ "ATIVAR CONTA" } color={ '#747474' }
                            onPress={ () => Actions.ativar() }/>
                </View>

                <TouchableHighlight style={{ marginTop: 16, alignItems: 'center' }} onPress={ () => false }>
                    <Text style={{ color: '#e5625d' }}>Esqueci minha senha</Text>
                </TouchableHighlight>
            </View>
        </View>
    );
}
}

const mapStateToProps = state => ({
    message: state.LoginReducer.message
});

export default connect(mapStateToProps, { verificaLogin })(Login);

Answer 1

You need to do a Dispatch to add your role in connect. Ex:

import actions from 'myActions'

...

const mapStateToProps = state => ({
    message: state.LoginReducer.message 
});

const mapDispatchToProps = dispatch => ({
    verificaLogin: () => dispatch(actions.verificaLogin())
});
export default connect(mapStateToProps, mapDispatchToProps)(Login);