React redux dispatch action before render container

Question

I am very new to React-redux applications development and I am trying to understand how to dispatch another action as soon as the page loads. Following is my container code. I am using this (https://github.com/jpsierens/webpack-react-redux) boilerplate.

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

This Code gives me Warning: setState(…): Cannot update during an existing state transition probably because I am dispatching an action during the render function (IDK). How can I convert the given code to trigger the activateUser() function automatically as soon as the page loads.

Michael Peyper · Accepted Answer · 2017-04-30 14:04:42Z

5

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

componentWillMount() and componentDidMount() for you. And my opinion - you should avoid using the componentWillMount and prefer the componentDidMount - this is make sense if you somewhen will be using server rendering

edited Apr 30, 2017 at 14:04

Michael Peyper

6,9642 gold badges31 silver badges46 bronze badges

answered Apr 30, 2017 at 13:45

Yozi

12.9k1 gold badge27 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Michael Peyper Over a year ago

@Saad Anjum you will need to change ActivationPage to extend React.Component in order to use the lifecycle functions mentioned in this answer.

Saad Anjum Over a year ago

thank you @MichaelPeyper and Yozi for pushing me in the right direction. Got it working now.

Community · Accepted Answer · 2017-05-23 10:31:10Z

Got it working after I converted the component to be a class which extends Component This answer here helped me with some of the concepts How do you mix componentDidMount() with react-redux connect()? Following is the implementation for those who might be confused about this as I was.

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

Collectives™ on Stack Overflow

React redux dispatch action before render container

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related