React/Redux - Aktion auslösen, sobald die vorherige Aktion abgeschlossen ist

Question

Ich baue meine erste App mit React + Redux und bin auf ein Problem gestoßen und ich bin mir nicht sicher, wie ich damit umgehen soll.

Ich habe eine "Filter" und eine "Liste" -Komponente. Die Liste ist nur eine Liste von Datensätzen und der Inhalt der Liste wird durch die Filtereinstellungen bestimmt. Dies ist, wie ich denke, es sollte funktionieren:

• Filter Feld in der Filterkomponente
• Redux ‚FILTER_UPDATE‘ Aktion ausgelöst wird, geändert wird, löst dies einen Beitrag Anfrage an den Server mit den neuen Filtereinstellungen
• Filter Minderer aktualisiert den ‚Filter‘ Zustand der neuen Filtereinstellungen zu reflektieren in React

Der nächste Teil ist, wo ich stecke immer:

• Sobald das Update Filter AJAX-Anforderung abgeschlossen ist Ich brauche die Aktion auszulösen, die die Listenelemente wieder holt, damit der Server die Liste auf den neuen Filtereinstellungen zurücksetzen
basierend

Hier ist, was ich habe versucht. Dies ist die Funktion in der Filterkomponente, die die Aktion ausgelöst:

updateFilter(event) { 
    const field = event.target.getAttribute('name'); 
    const value = event.target.value; 
    this.props.updateFilter(field,value); // Updates the filter 
    this.props.getList(); // Fetches the new filtered list 
} 

Das Problem ist, dass die getList() Aktion zu schnell gebrannt. Ich muss warten, bis die updateFilter() AJAX-Anforderung abgeschlossen ist, damit der Server die Filtereinstellungen beim erneuten Senden der Elemente kennt.

Welcher ist der beste Weg, um die getList() Aktion auszulösen, aber nur wenn die updateFilter() AJAX Anfrage abgeschlossen ist?

Hier sind die beiden Aktionen updateFilter() und getList():

// Update filter 
export function updateFilter(field,value) { 

    const response = axios.post(API_ROOT+'/filter/update',{ 
     field: field, 
     value: value 
    }); 

    return { 
     type: UPDATE_FILTER, 
     payload: {field, value} 
    } 
} 

// Get items 
export function getList() { 

    const response = axios.get(API_ROOT+'/item'); 

    return { 
     type: GET_LIST, 
     payload: response 
    } 
} 

Hier werden die relevanten Teile aus der Liste und Filter Minderer sind:

// Filter reducer 
case 'UPDATE_FILTER': 
    return update(state,{ 
     [action.payload.field]: { $set: action.payload.value } 
}); 

// List reducer 
case 'GET_LIST': 
    return action.payload.data; 

Ihnen allen im Voraus danken.

Answer 1

Es gibt viele Lib und Lösung, um dies zu tun, können Sie mit Blick auf redux-thunk beginnen, die für Ihre Implementierung geeignet sein kann. Es zielt darauf ab, asynchrone Aktionen zu verwalten, die eine andere Aktion auslösen können.

Answer 2

Zumindest sollten Sie Server Antwort warten:

export function getList() { 

    axios.get(API_ROOT+'/item').then(function (response) { 
     return { 
      type: GET_LIST, 
      payload: response 
     }; 
    }); 
} 

Siehe axios Beispiele