J'ai un problème, je crois que beaucoup d'entre vous ont été confrontés en quelque sorte, alors j'utilise quelque chose comme ça , Réponse Data renvoie une matrice de 8 éléments, mais Ce code est dans mon réducteur, je dois donc obtenir mes tâches Ceci est mon réducteur: P> axios code> pour obtenir mes données: Tâches CODE> est toujours vide, ce qui est normal, car la demande axios code> prend du temps, je peux utiliser Settimeout pour 100ms et à l'intérieur, je mettre console.log (tâches); code> et cela fonctionnera mais n'est pas une solution appropriée, car si le serveur prend 5 ans pour renvoyer les données? P> code> et les renvoyer afin que je puisse les afficher et montrer un chargeur lorsque la demande est exécutée. P > import update from "immutability-helper";
import Axios from "axios";
export default function getTasksReducer(state = [], action) {
switch (action.type) {
case "GET_TASKS":
let data = Axios.get(
"http://localhost:8080/api/taskExecution?&search=&page=1&size=8"
).then(response => {
if (response.status !== 200) {
console.log("LOADING");
} else {
return response.data;
}
});
let tasks = [];
data.then(response => {
tasks = response;
});
console.log(tasks);
return tasks;
default:
return state;
}
}
3 Réponses :
Je suppose que vous pouvez avoir passé du temps à comprendre les promesses et async / awiat
pour par exemple: si vous faites cela, votre console aura toutes les tâches répertoriées. P>
let tasks = await Axios.get("http://localhost:8080/api/taskExecution?&search=&page=1&size=8")
.then(response => {
if (response.status !== 200) {
console.log("LOADING");
} else {
return response.data;
}
});
console.log(tasks);
return tasks;
Mais comment cela va-t-il résoudre mon problème, à utiliser attendre Je dois le mettre à l'intérieur d'une méthode asynchreuse, de sorte que mes tâches sont déclarées à l'intérieur de la méthode ASYNC, en dehors de celui-ci, il n'y a pas de tâches, je ne l'obtiens pas en fait, Je n'ai toujours pas de vision claire .J'ai édité ma question, vous pouvez vérifier mon réducteur entier.
D'accord Buddy, alors il y a quelques choses que je veux lever:
Tout d'abord, vous devriez Toujours Utilisez vos réducteurs de retourner à nouveau à Redux, et c'est tout. Vous venez de fusionner de nouvelles données provenant d'actions, avec votre ancien état et le retourne. Et vous ne pouvez pas utiliser Deuxièmement, toute la logique commerciale Vous pouvez aller devenir grand ou commencer à rester petit avec ces libs, de toute façon, ils vous obligeront à vous déplacer des données de récupération de votre action. Si vous souhaitez appuyer le chargement des données, alors des actions d'expédition qui indiquent espère qu'il aide <3 prometteur ou async / attendre là-bas car ReDux ne prend pas et ne prend pas en charge ce comportement.
REDUX-SAGA pour gérer les opérations asynchrones dans vos actions. redx-thunk est moins compliqué que redx-saga , mais redux-saga vous permet de gagner beaucoup de fonctionnalités cooles pourtant un peu compliqué .
redx : "Je charge des données" ou "J'ai eu une erreur lors du chargement de données" ou "J'ai chargé des données". Et lorsque cette action entre en place, mettez à jour votre magasin, affichez le chargeur, des données ou une erreur si vous avez besoin. Vous pouvez jeter un coup d'œil sur Ceci ou que exemple d'utilisation redux-thunk pour la récupération de données, il y a tout ce dont vous avez besoin pour commencer avec ASYNC Actions.
Oui, je vais les mettre dans mes actions, mais je ne pense pas que ce soit mon problème, je crois, car si je mets ce code dans l'action, je vais avoir la même chose, ma variable de tâches ne sera pas remplie, elle sera Soyez vide, ce qui signifie que je dois attendre que ma demande soit exécutée complètement puis placez la variable de tâches, c'est ce que je cherche ..
Et c'est exactement ce que j'ai écrit à propos de :) Vous NE PAS Besoin de "données" qui n'a pas été arrivé au client. Vous venez d'attendre quand ce prometteur résout et seulement met à jour votre magasin avec les données. Vous allez jamais SAVOIR combien de temps cela prendra pour la demande à venir. Vérifiez les exemples de guides à la fin de ma réponse pour mieux comprendre cela. Ou simplement Google "ASYNC Actions réagissent Redux" au point de vue complet Pourquoi cela devrait être comme ça :)
Comme indiqué dans les autres réponses, je serais configurer mon réducteur uniquement pour gérer la mise à jour de l'état et la fonction Créateur d'action pour récupérer des données. Voici le point de départ minimal si je devais le faire. Vous pouvez utiliser l'état de chargement pour afficher les fileuses ou les barres de progression de chargement.
ma fonction de créateur d'action avec les actions individuelles: et le réducteur gérerait la mise à jour de l'état comme Suit: Je suggérerais la console de la journalisation et de la vérification des réponses (données et des erreurs) et de modifier les deux fonctions en conséquence