在渲染容器之前反应 redux 调度动作答案

【问题标题】：React redux dispatch action before render container在渲染容器之前反应 redux 调度动作
【发布时间】：2017-09-28 03:36:57
【问题描述】：

我对 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(...): Cannot update during an existing state transition 可能是因为我在渲染函数 (IDK) 期间调度了一个动作。如何转换给定的代码以在页面加载后立即自动触发 activateUser() 函数。

【问题讨论】：

标签： javascript reactjs redux render setstate

【解决方案1】：

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

componentWillMount() 和 componentDidMount() 为您服务。我的意见 - 你应该避免使用 componentWillMount 而更喜欢 componentDidMount - 如果你有时会使用服务器渲染，这是有道理的

【讨论】：

@Saad Anjum 您需要更改 ActivationPage 以扩展 React.Component 才能使用此答案中提到的生命周期功能。
感谢 @MichaelPeyper 和 Yozi 将我推向正确的方向。现在可以使用了。

【解决方案2】：

在我将组件转换为class extends Component 后，它可以工作了这个答案在这里帮助了我一些概念 How do you mix componentDidMount() with 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);

【讨论】：