Comment coordonner les messages d'erreur du serveur entre Flux et React?

Question

J'ai appris React et Flux au cours des derniers mois, et une chose que je n'ai pas encore traitée est l'affichage de messages d'erreur aux utilisateurs. Plus précisément, les messages d'erreur qui se produisent à la suite d'une requête http ajax dans une méthode de création d'action de flux.

Un exemple simple est la connexion d'utilisateur - si le signe dans la requête ajax échoue en raison d'un mot de passe incorrect, le serveur répond avec l'échec. À ce moment, dans ma méthode de créateur d'action de flux, ma seule option est d'envoyer une action contenant les informations d'erreur, non?

Je peux envoyer les informations d'erreur et conserver cette erreur dans un magasin. Je ne suis pas sûr que la meilleure façon de lier certaines erreurs à certains composants est, cependant. Supposons que mon arbre de composants de réaction affiche plusieurs composants sensibles aux erreurs, mais une erreur se produit lors de la tentative d'authentification de l'utilisateur côté serveur et doit être affichée sous cette forme de connexion.

Existe-t-il un bon modèle ou convention pour stocker les erreurs et savoir pour quel composant ils sont? Existe-t-il une manière programmatique de déterminer ceci, au lieu de transmettre un identifiant à chaque fonction créatrice d'action qui identifie le composant auquel le créateur d'action l'appelle, etc?

Answer 1

Puisque vous avez marqué la question avec la balise Redux, je suppose que vous utilisez Redux.
Si tel est le cas, ce real-world example indique la gestion des erreurs.

Il y a un reducer that reacts to any action with error field:

// Updates error message to notify about the failed fetches. 
function errorMessage(state = null, action) { 
    const { type, error } = action; 

    if (type === ActionTypes.RESET_ERROR_MESSAGE) { 
    return null; 
    } else if (error) { 
    return action.error; 
    } 

    return state; 
} 

Le middleware API personnalisé puts any error message into error field on the action:

return callApi(endpoint, schema).then(
    response => next(actionWith({ 
     response, 
     type: successType 
    })), 
    error => next(actionWith({ 
     type: failureType, 
     error: error.message || 'Something bad happened' 
    })) 
); 

Enfin, la composante reads the error message from Redux store:

function mapStateToProps(state) { 
    return { 
    errorMessage: state.errorMessage 
    }; 
} 

Comme vous pouvez le voir, ce n'est pas une différent de la façon dont vous traiteriez l'affichage des données récupérées.

Answer 2

Votre idée de conserver les informations d'erreur dans un magasin est correcte (probablement un ErrorStore). Mais le magasin n'a pas besoin de connaître le composant intéressé par une erreur particulière. Au lieu de cela, le ErrorStore doit émettre un événement CHANGE. Lors de l'émission de cet événement, vous pouvez ajouter un argument supplémentaire, à savoir le type d'erreur (que le magasin obtient probablement du créateur de l'action).

Maintenant, tout composant peut écouter le ErrorStore et vérifier le type d'erreur (qu'il obtiendra comme argument). Les composants peuvent alors savoir quel type d'erreur a été généré et décider s'ils sont intéressés ou non.