Реагировать на избыточное действие отправки перед рендерингом контейнера

Я очень новичок в разработке приложений React-redux, и я пытаюсь понять, как отправить другое действие, как только страница загрузится. Ниже приведен код моего контейнера. Я использую это (https://github.com/jpsierens/webpack-react-redux) Шаблон.

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

Этот код дает мне Предупреждение: setState(…): Невозможно обновить во время существующего перехода состояния, вероятно, потому, что я отправляю действие во время функции рендеринга (IDK). Как я могу преобразовать данный код, чтобы автоматически запускать функцию activUser(), как только страница загружается.


reactjs javascript redux setstate render
person Saad Anjum    schedule 30.04.2017    source источник

Ответы (2)


arrow_upward
5
arrow_downward

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

componentWillMount() и componentDidMount() для вас. И мое мнение - вам следует избегать использования componentWillMount и предпочесть componentDidMount - это имеет смысл, если вы когда-нибудь будете использовать серверный рендеринг.

person Yozi    schedule 30.04.2017
comment
@Saad Anjum вам нужно будет изменить ActivationPage на расширение React.Component, чтобы использовать функции жизненного цикла, упомянутые в этом ответе. - person Michael Peyper; 30.04.2017
comment
спасибо @MichaelPeyper и Yozi за то, что подтолкнули меня в правильном направлении. Получил это работает сейчас. - person Saad Anjum; 30.04.2017

arrow_upward
2
arrow_downward

Он заработал после того, как я преобразовал компонент в class, который extends Component Этот ответ здесь помог мне с некоторыми концепциями Как вы смешиваете componentDidMount() с react-redux connect()? Ниже приведена реализация для тех, кто, как и я, может запутаться в этом.

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);
person Saad Anjum    schedule 30.04.2017