Reakcja na redukcję reakcji redux przed kontenerem renderowania

Question

Jestem bardzo nowa w tworzeniu aplikacji React-redux i próbuję zrozumieć, jak wysłać kolejną akcję zaraz po załadowaniu strony. Poniżej znajduje się mój kod kontenera. Używam tej tablicy (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); 

Ten kod daje mi Warning: setstate (...): nie można zaktualizować podczas istniejącego przejścia państwowej prawdopodobnie dlatego jestem wysyłki akcję podczas funkcji render (IDK). Jak mogę przekonwertować podany kod, aby automatycznie uruchomić funkcję activateUser(), gdy tylko strona się załaduje.

Answer 1

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

componentWillMount() i componentDidMount() dla Ciebie. A moim zdaniem - należy unikać używania componentWillMount i wolą componentDidMount - to ma sens, jeśli somewhen będzie używany serwer renderingu

Answer 2

Got to działa po I konwertowane komponent być class który extends Component tutaj pomógł Ta odpowiedź ja z niektórymi z pojęć How do you mix componentDidMount() with react-redux connect()? Poniżej znajduje się implementacja dla tych, którzy mogą być zdezorientowani na temat tego, jak byłem.

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