Je suis très nouveau dans le développement d’applications React-redux et j’essaie de comprendre comment envoyer une autre action dès le chargement de la page. Voici mon code de conteneur. J'utilise ce ( https://github.com/jpsierens/webpack-react-redux ) passe-partout.
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);
Ce code me donne Warning: setState (…): Impossible de mettre à jour pendant une transition d'état existante probablement parce que je déclenche une action pendant la fonction de rendu (IDK). Comment puis-je convertir le code donné pour déclencher la fonction activateUser () automatiquement dès le chargement de la page.
https://facebook.github.io/react/docs/react-component.html
componentWillMount()
et componentDidMount()
pour vous ..__ Et, à mon avis, vous devriez éviter d'utiliser la variable componentWillMount
et préférer la variable componentDidMount
: il est donc logique que vous utilisiez le rendu du serveur.
Je l'ai obtenu après avoir converti le composant en class
qui extends Component
Cette réponse m'a aidé à comprendre certains concepts Comment mélangez-vous composantDidMount () avec react-redux connect ()? Voici la mise en œuvre pour ceux qui pourraient être confus à ce sujet comme je l’étais.
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);