Je veux rediriger le client après la mise à jour d'une action. J'ai entendu parler de J'ai suivi un peu de cette HTTTPS://stackoverflow.com/a/42985875/10865515 Cependant, lorsque je soumets le formulaire validé, il ne redirige pas ou rafraîchit. réducteurs.js register.js réacteur-redux-routter , mais je ne sais pas comment le mettre correctement implémenter dans la fonction Actions.
3 Réponses :
Vous devez implémenter la bibliothèque dans votre composant qui tire le créateur d'action : p> en bas du code, où vous appelez Connect: p> Vous pouvez maintenant configurer votre Créateur d'action pour prendre l'histoire comme argument. p> Votre fichier d'actions: p> donc dans votre gestionnaire d'événements où vous appelez votre créateur d'action, passez Historique: P> React-Router-DOM CODE> qui vous donne accès à l'objet code> objet code> pour la navigation. handleSubmit(event) {
event.preventDefault();
this.props.signUp(creds, this.props.history);
if (register) {
console.log(creds);
}
}
Où allais-je placer le history.push dans le créateur d'action? Si quelque chose, je ne suis pas sûr de l'endroit où placer. merci BTW.
Je l'ai fait comme ça firebaseauth.createuserwithemailandpassword (utilisateur.email, user.password) .Chen ((historique) => {Dispatch ({Type: 'Signup_success'}, historique.push ('/'));} ) .catch ((err) => {expédition ({type: 'Signup_error', err});}); }
im obtenir historique.push n'est pas une fonction
Vous auriez besoin d'une fonction globale qui exécute l'action Firebase. Quelque chose comme Cons Signin = (Historique) => {votre code de firebase} .then ((res) historique.Push ("/"). Assurez-vous que vous appelez cette fonction dans votre composant
im suivant cette Stackoverflow.com/Questtions/48514773/...
ok c'est ce que j'ai jusqu'à présent firebaseauth.createuserwithemailandpassword (utilisateur.email, user.password) .Chen ((((({Tapet ({Type: 'Signup_success'}). Historique.Push ('/') ;}). Catch (((err) => {Dispatch ({Type: 'Signup_error', err});});}); }
Cette réponse résout le problème à l'histoire.Push () d'une action à redux. Il suffit d'ajuster votre action pour recevoir un paramètre d'historique et transmettez-le du répartiteur.
C'est mon exemple avec Firebase et Redux:
à l'intérieur de vos actions import { Redirect } from 'react-router-dom';
class SignIn extends Component {
state = {
email: '',
password: ''
};
handleChange = e => {
this.setState({
[e.target.id]: e.target.value
});
};
handleSubmit = e => {
e.preventDefault();
this.props.signIn(this.state);
};
render() {
const { authError, auth } = this.props;
if (auth.uid) return <Redirect to="/" />;
return (
<div className="container">
<form onSubmit={this.handleSubmit} className="white">
...
</form>
</div>
);
}
}
const mapStateToProps = state => {
return {
authError: state.auth.authError,
auth: state.firebase.auth
};
};
const mapDispatchToProps = dispatch => {
return {
signIn: creds => dispatch(signIn(creds))
};
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(SignIn);
Merci pour le code, cela m'aidez à comprendre les Redux beaucoup par les exemples. Cependant, je ne veux pas le faire de cette façon. Je veux juste simplement rediriger une fois qu'un utilisateur s'inscrit. Je veux quelque chose que je peux ajouter avec le code existant que j'ai. Je n'apprendrai rien si je viens de copier ça.
Eh bien, je ne l'ai pas vraiment mis ici pour la copie. Ceci est (à mon avis) une manière appropriée que vous devriez examiner les redirections avec redx . Au début, je voulais juste vous donner un court extrait du code mais je pense que tout le monde peut comprendre ce qui se passe réellement.
Tout a fière allure, sauf pour le feuestore. Je n'utilise pas la Fireestore. C'est pourquoi je suis quelque peu hésité à utiliser ce code.
thx, mais im référençant ce guichet automatique Stackoverflow.com/questions/48514773/...
Aucun problème de résolution de façons de différentes manières vous fera un meilleur solveur de problèmes :) N'utilisez pas le code, mais les modèles de flux de données uniquement. Composant Créer l'utilisateur> Action> Obtenir une réponse à l'action> Changements de réducteur Etat> Les composants obtiennent ce qui s'est passé de l'état de Redux et agit en conséquence. Si votre inscription réussit, il redirige, sinon vous obtenez un message affiché.
Je l'ai réparé.
En dehors du problème découlant de cette
réagit historique.Push () met à jour l'URL mais ne pas naviguer à elle dans le navigateur
et ne sachant pas comment savoir comment Utilisez correctement I nécessaire pour envelopper les étiquettes de routeur autour de l'application et mettre à jour mes actions comme si navar.js garde ma fonction de poignée existante de la même manière. puis
Peut-être que ce poste va aider Stackoverflow.com/Questions/48514773/...