La fonction n'enverra pas Redux Dispatch après une demande Fetch Delete dans React

Question

Je soumets une demande de suppression à mon backend onClick et lorsque j'obtiens la réponse du serveur, j'essaye d'appeler une fonction dispatch pour mettre à jour le magasin Redux. Les données de backend peuvent supprimer la demande efficacement; Cependant, quand je comprennent l'appel d'expédition, React me donne cette erreur:

./src/actions/questions.js 
    Line 68: 'dispatch' is not defined no-undef 

J'ai essayé des tonnes de syntaxe différente et les combinaisons .alors après la réponse reçue, mais rien ne fonctionne. Ceci est déroutant pour moi parce que dans le thunk chercher les appels que je fais, je suis en mesure d'appeler la répartition lorsque je reçois la réponse. Je ne suis pas en mesure d'utiliser la syntaxe thunk traditionnelle car elle ne déclenchera pas la requête car elle est initialement déclenchée dans un événement onClick d'un composant. Ainsi, la suppression d'extraction demande que je fais ressemble à ceci:

export function deleteQuestion(questionId, routerHistory) { 
    return fetch(`${API_URL}/questions/${questionId}`, { 
     method: 'DELETE', 
    }).then(res => 
    dispatch(removeQuestion(questionId))) 
    } 

J'ai pensé à l'envoi juste removeQuestion en dehors de la méthode, mais je crains que le magasin Redux deviendrait pas synchronisé avec les données back-end et causer des problèmes plus tard. J'apprécierais grandement tout aperçu que quelqu'un pourrait fournir. Je ne pense pas que la suppression d'un élément et la mise à jour du magasin Redux soient si difficiles.

C'est le github ainsi: https://github.com/jwolfe890/react_project1/blob/master/stumped-app-client/src/actions/questions.js

Merci encore.

Answer 1

Votre syntaxe est désactivée. Un thunk renvoie une fonction qui prend en paramètre dispatch. dispatch sera transmis par le middleware. Par conséquent, votre créateur d'action devrait être comme suit:

export function deleteQuestion(questionId, routerHistory) { 
    return (dispatch) => { 
    fetch(`${API_URL}/questions/${questionId}`, { 
     method: 'DELETE', 
    }).then(res => { 
     dispatch(removeQuestion(questionId)) 
    }) 
    } 
} 

Answer 2

Voir le problème est dans votre fonction deleteQuestion, ni que vous avez défini ce dispatch est ni vous avez passé le dispatch comme argument à votre fonction. Donc, vous obtenez l'erreur dispatch is not defined.

Dans redux-thunk vous renvoyez une fonction qui prend dispatch comme argument qui est fourni par le middleware redux-thunk. Et c'est pourquoi ça fonctionne parfaitement bien.