envoyer une action une fois que la validation côté serveur est passée dans le formulaire redux

Question

Je suis confronté à un problème dans le formulaire redux, mon problème est dans le code, une fois que j'ai passé la validation du serveur. Je veux envoyer une action, mais je n'y arrive pas, Je suis en train d'utiliser le formulaire redux exemple de validation des soumissions Dans mon formulaire, j'ai une validation côté client et côté serveur.

LoginForm.js

import React from 'react'
import { Field, reduxForm } from 'redux-form'

import { required, email, maxLength25 } from '../utils/validations';
import validate from '../utils/signup_validate';
import { renderField } from '../utils/textFieldGroup';
import { login } from '../actions/submit';

const LoginForm =(props) => {
        const { handleSubmit, submitSucceeded, error } = props

        return (
          <form onSubmit={handleSubmit(login)}>
            <div className={typeof error!='undefined'?'show alert alert-danger': 'hidden'}>
             <strong>Error!</strong> {error}
            </div>
            <Field name="email" type="text"
              component={renderField} label="Email"
              validate={[ required, email, maxLength25 ]}
            />
            <Field name="password" type="password"
              component={renderField} label="Password"
              validate={[ required, maxLength25 ]}
            />
            <p>
              <button type="submit" disabled={submitSucceeded} className="btn btn-primary btn-lg">Submit</button>
            </p>
          </form>
        )
}

export default reduxForm({
  form: 'loginForm', // a unique identifier for this form
  validate
})(LoginForm)

submit.js

import axios from 'axios';
import isEmpty from 'lodash/isEmpty';
import { SubmissionError } from 'redux-form'
import {browserHistory} from 'react-router';
import setAuthorizationsToken from '../utils/setAuthorizationsToken';
import { SET_CURRENT_USER } from '../utils/types';
import jwt from 'jsonwebtoken';

export function login(data){
    console.log('submit', data);
    return axios.post('api/auth/login', data)
    .then((response) => {
        console.log('response', response.data.token);
        const token = response.data.token
        localStorage.setItem('jwtToken', token)
        setAuthorizationsToken(token)
        store.dispatch(setCurrentUser(jwt.decode(localStorage.jwtToken)))
        browserHistory.push('/');
    })
    .catch((error) => {
        console.log('error', error.response);
        throw new SubmissionError({ _error: error.response.data.errors});
    })
}

function setCurrentUser(user) {
    console.log('setCurrentUser');
    return {
        type: SET_CURRENT_USER,
        user: user
    }
}

Je veux dispatcher la fonction setCurrentUser pour pouvoir définir les données de l'utilisateur dans le magasin redux.

Merci d'avance.

Answer 1

Solution 1

Au lieu de transmettre directement votre fonction de connexion à la fonction handleSubmit vous pouvez passer une autre fonction qui le fait :

login(data).then((user) => dispatch(setCurrentUser(user))

Pour que cela fonctionne, vous devez utiliser connect de react-redux pour permettre à votre composant d'accéder au dispatch de la boutique redux. Vous devez également renvoyer l'utilisateur à partir de la fonction resolve de l'appel ajax :

.then((response) => {
    console.log('response', response.data.token);
    const token = response.data.token
    localStorage.setItem('jwtToken', token)
    setAuthorizationsToken(token)
    return jwt.decode(localStorage.jwtToken));
})

Je conseille également de déplacer le browserHistory.push('/') au composant (après avoir envoyé la commande setCurrentUser action)

Solution 2

Vous devez en fait enchaîner les actions, login -> then -> setCurrentUser. Pour cela, vous devez utiliser un middleware redux. Si vous n'avez jamais travaillé avec des middlewares, je vous suggère de commencer avec redux-thunk : https://github.com/gaearon/redux-thunk . Avec redux-thunk vous pouvez utiliser le dispatch à l'intérieur de vos créateurs d'actions pour envoyer plusieurs actions. Si vous voulez plus d'informations sur ce sujet, laissez un commentaire ci-dessous et j'essaierai d'étoffer ma réponse.