Puis-je annuler un thunk d'une action envoyée?

Question

Au début du thunk, j'expédie une action 'START', puis j'attends quelques trucs asynchrones, et enfin j'expédie une action 'SUCCESS'.

Parfois, il arrive que ce thunk soit envoyé à nouveau avant la fin du précédent (action de succès), donc je veux que la deuxième action START soit refusée et le thunk cesse de continuer à l'action asynchrone et END. Donc mon approche est de vérifier dans le middleware si une action envoyée a déjà été envoyée (l'action précédente est la même que celle en cours), mais je n'arrive pas à comprendre comment je pourrais revenir du thunk juste après l'action refusée dans un ' belle façon.

Actuellement, je renvoie false à partir du middleware et j'ai besoin de vérifier la valeur retournée de l'expédition.

export const doSomething =() => async (dispatch, getState) => { 

    if(!dispatch({type: 'START'})) return; 

    //...async stuff 

    dispatch({type: 'SUCCESS'}); 
} 

Y a-t-il un moyen de contrôler cela à partir d'un point (middleware)?

Answer 1

Je suppose qu'il existe un réducteur qui modifie l'état de stockage en fonction de ces actions (START, SUCCESS, ...).

Si oui, vous devez vérifier l'état du magasin avant de décider l'envoi:

export const doSomething =() => async (dispatch, getState) => { 

    if (getState().isLoading) return ; // <-- ⚠️ ⚠️ ⚠️ 

    if(!dispatch({type: 'START'})) return; 

    //...async stuff 

    dispatch({type: 'SUCCESS'}); 
} 

en supposant que le réducteur a fait quelque chose comme ce qui suit:

function (state = {}, action) { 
    if (action.type === 'START') { 
    return {...state , isLoading: true }; 
    } 

    if (action.type === 'SUCCESS') { 
    return {...state , isLoading: false }; 
    } 
    return state; 
}