Wann findet fetch() in Redux statt?

Question

Ich habe ein Problem mit der Steuerung der Ausführung meiner fetch() - Funktionen. Insbesondere möchte ich vermeiden, dass der Benutzer fetch() Anfragen spam.

Meine Idee war, dies innerhalb der Middleware zu tun, aber wenn die Aktion mit einem fetch() ankommt, ist die Nutzlast bereits ein Versprechen.

Also meine Frage ist, wann genau wird eine fetch() bereits ausgeführt?

Wenn es darauf ankommt, sieht mein Code ungefähr so ​​aus.

Eltern Aktion:

{ 
    return (dispatch) => { 
    if (mode === 'MY') { 
     dispatch(myAction(...); 
    } 

    dispatch(someOtherAction(...)); 
    } 
} 

Meine Aktion:

{ 
    type: 'TYPE', 
    promise: post(url, payload) 
} 

My post-Methode:

{ 
    console.log('sending POST'); 

    return fetch(url, { 
    //fetch info 
    }); 
} 

Meine Middleware:

{ 
    return next => action => { 

    const { promise, //other fields } = action; 
    //Already a promise here. 

    if (!promise) { 
     return next(action); 
    } 

    return promise.then(
     //Processing data 
    ); 
    }; 
} 

Answer 1

Meine Idee war, dies innerhalb der Middleware zu tun, aber wenn die Aktion mit fetch() da ist, ist die Nutzlast bereits ein Versprechen.

Um dieses Problem zu lösen, würde ich es als eine Überprüfung innerhalb der Aktion tun. Wenn Sie also die Abrufanforderung auslösen, senden Sie eine Aktion, die gerade ausgeführt wird, und aktualisieren Sie den Status auf . In einer anderen Aktion, die Fetch verwenden muss, überprüfen Sie diesen Status und geben nichts zurück, wenn es wahr ist.

Ihren Kommentar zu beantworten:

Wenn Sie eine Aktion Schöpfer nennen, das natürlich sofort aufgerufen wird. Wenn Sie den Dispatch aufrufen, führt dieser dann die Funktion aus (bei Verwendung von redux-thunk). Da es sich bei redux-thunk um eine Middleware handelt, wird sie abhängig von der Reihenfolge der Middleware ausgeführt. Also, wenn Sie Ihre eigene Middleware in das Setup vor Redux thunk legen, wird es davor ausgeführt.

const store = createStore(
    combineReducers(reducers), 
    applyMiddleware(yourMiddleware, ReduxThunk) 
); 

Sonst haben Sie das Verständnis richtig. Eine Aktion wird unmittelbar nach dem Aufruf des Versands ausgelöst, die Middleware wird der Reihenfolge nach durchlaufen und dann die Aktionsinformationen an Ihre Reduzierungen weitergeleitet.