javascript - react - Reaccionar la acción de despacho de redux antes de procesar el contenedor

setstate reactjs

Question

Soy muy nuevo en el desarrollo de aplicaciones React-redux y estoy tratando de comprender cómo enviar otra acción tan pronto como se cargue la página. A continuación está mi código de contenedor. Estoy usando este ( https://github.com/jpsierens/webpack-react-redux ) texto estándar.

let locationSearch;

const ActivationPage = ({activateUser}) => {
    return (
        <div className="container">
          <h2>Activation Required</h2>
          <p>An Activation Email was sent to your email address. Please check your inbox to find the activation link</p>
          { activateUser() }
        </div>
    );
};


ActivationPage.propTypes = {
    activateUser: PropTypes.func
};


const mapStateToProps = (state) => {
    return {
        message: state.message,
        currentUser: state.currentUser,
        request: state.request
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        activateUser: () => {
            console.log(location);
            if (location.search !== '''') {
                locationSearch = querystring.parse(location.search.replace(''?'', ''''));
                console.log(locationSearch);
                if (locationSearch.hasOwnProperty(''user_id'') && locationSearch.hasOwnProperty(''activation_code'')) {
                    // change request state to pending to show loader
                    dispatch(actions.requestActions.requestPending());

                }
            }
        }
    };
};

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(ActivationPage);

Este código me da una advertencia: setState (...): no se puede actualizar durante una transición de estado existente, probablemente porque estoy enviando una acción durante la función de renderizado (IDK). ¿Cómo puedo convertir el código dado para activar automáticamente la función activateUser () tan pronto como se carga la página?

Answer 1

Lo conseguí trabajando después de convertir el componente para que fuera una class que extends Component Esta respuesta aquí me ayudó con algunos de los conceptos. ¿Cómo se mezcla componentDidMount () con react-redux connect ()? A continuación está la implementación para aquellos que podrían estar confundidos acerca de esto como yo.

import React, { Component, PropTypes } from ''react'';
import { connect } from ''react-redux'';
import actions from ''../actions'';

let locationSearch;

class ActivationPage extends Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.props.activateUser();
    }

    render() {
        return (
        <div className="container">
           <h2>Activation Required</h2>
           <p>An Activation Email was sent to your email address. Please check your inbox to find the activation link</p>
        </div>
        );
    }
}

ActivationPage.propTypes = {
    activateUser: PropTypes.func
};

const mapStateToProps = (state) => {
    return {
        request: state.request
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        activateUser: () => {
            if (location.search !== '''') {
                locationSearch = querystring.parse(location.search.replace(''?'', ''''));
                if (locationSearch.hasOwnProperty(''user_id'') && locationSearch.hasOwnProperty(''activation_code'')) {
                    // change request state to pending to show loader
                    dispatch(actions.requestActions.requestPending());
                }
             }
        }
    };
};

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(ActivationPage);

Answer 2

https://facebook.github.io/react/docs/react-component.html

componentWillMount() y componentDidMount() por ti. Y mi opinión: debes evitar usar el componentWillMount y preferir el componentDidMount ; esto tiene sentido si alguna vez utilizarás la representación del servidor.