Funktion sendet Redux Dispatch nicht nach einem Fetch Delete Request in Reagieren

Question

Ich übermittle eine Löschanforderung an mein Backend onClick und wenn ich die Antwort vom Server erhalte, versuche ich eine Dispatch-Funktion aufzurufen, um den Redux-Store zu aktualisieren. Die Back-End-Daten können die Anfrage effektiv löschen. aber wenn ich den Dispatch-Anruf enthalten, Reaktion gibt mir diese Fehlermeldung:

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

ich Unmengen an verschiedenen Syntax versucht haben und .then Kombinationen nach Antwort empfangen wird, aber nichts funktioniert. Das ist verwirrend für mich, weil ich in den Thunk-Fetch-Anrufen, die ich mache, den Dispatch aufrufen kann, wenn ich die Antwort bekomme. Ich kann die traditionelle Thunk-Syntax nicht verwenden, da die Anfrage nicht ausgelöst wird, da sie ursprünglich in einem OnClick-Ereignis in einer Komponente ausgelöst wurde. Also, holen die Löschanfrage Ich mache sieht wie folgt aus:

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

dachte ich habe über nur removeQuestion Dispatching außerhalb des Verfahrens, aber dann mache ich mir Sorgen, dass die Redux Speicher nicht synchron mit dem Back-End-Daten werden würde und später Probleme verursachen. Ich würde mich über jede Einsicht freuen, die jemand zur Verfügung stellen kann. Ich glaube nicht, dass das Löschen eines Artikels und das Aktualisieren des Redux-Shops so herausfordernd sein sollte.

Dies ist Github auch: https://github.com/jwolfe890/react_project1/blob/master/stumped-app-client/src/actions/questions.js

Sie wieder danken.

Answer 1

Ihre Syntax ist deaktiviert. Ein Thunk gibt eine Funktion zurück, die dispatch als Parameter einnimmt. dispatch wird von der Middleware übernommen. Deshalb ist ihre Wirkung Schöpfer sollte wie folgt lauten:

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

Answer 2

Sehen Sie das Problem in Ihrer deleteQuestion Funktion ist, weder Sie haben festgelegt, welche dispatch ist noch Sie haben die dispatch als Argument an die Funktion übergeben. Sie erhalten also den Fehler dispatch is not defined.

In redux-thunk geben Sie eine Funktion zurück, die dispatch als Argument verwendet, das von der redux-thunk Middleware bereitgestellt wird. Und deshalb funktioniert es perfekt.