Redux-Thunk-Aktionen

Question

Ich habe Aktionen/index.js Datei mit Aktion Ersteller, und ich verwende Redux-Thunk als Middleware. Dies ist der Code:

export const fetchUser =() => async dispatch => { 
    const res = await axios.get('/api/current_user'); 
    dispatch({type: FETCH_USER, payload: res.data}); 
}; 

export const handleToken = (token) => async dispatch => { 
    const res = await axios.post('/api/stripe/', token); 

    dispatch({type: FETCH_USER, payload: res.data}); 
}; 

export const submitSurvey = (values, history) => async dispatch => { 
    const res = await axios.post('/api/Surveys', values); 

    history.push('/Surveys'); 
    dispatch({type: FETCH_USER, payload: res.data}); 
}; 

export const scrollMovement = (scrollValue) => dispatch => { 
    dispatch({type: SCROLL_MOVE, payload: scrollValue}) 
}; 

export const selectConfig = (id) => dispatch => { 
    dispatch({type: "SELECT_CONFIG", payload: id}) 
}; 

Und ich habe eine Frage. Sollte ich Action-Ersteller, die keine Anfrage an eine externe API senden (zum Beispiel scrollMovement und selectConfig), im selben Stil schreiben, während ich hadleToken, submitSurvey und fetchUser Action Creators schreibe?

Ich hoffe, dass Sie meine Frage verstehen. Wenn nicht, füge Kommentare hinzu, werde ich erklären.

Answer 1

Für einen synchronen Datenfluss müssen Sie nur ein Objekt wie gewohnt zurückgeben, da thunk Middleware unter der Haube Aktionen des Typs function abfängt, bevor der Versand generiert wird.

Also für scrollMovement und selectConfig Sie keine Funktion zurückkehren, da diese einem ein synchroner Datenflusses folgen

export const scrollMovement = scrollValue => { 
    return {type: SCROLL_MOVE, payload: scrollValue} 
}; 

export const selectConfig = id => { 
    return {type: "SELECT_CONFIG", payload: id} 
};