2015-10-20 1 views
2

si j'ai une action asynchrone avec appel d'API, ce qui pourrait être soit une action retourne une fonction:Comment annuler une action Redux Async? (Étapes multiples de retour à l'état)

export function asyncAction(itemId) { 
    return (dispatch) => { 
    dispatch(requestStarted()); 

    return sendRequest(itemId).then(
     (result) => dispatch(requestSuccess()), 
     (error) => dispatch(requestFail()) 
    ); 
    }; 
} 

ou une retourne un objet et utilise middleware pour intercepter et faire choses:

export function asyncAction(itemId) { 
    return { 
    type: [ITEM_REQUEST, ITEM_REQUEST_SUCCESS, ITEM_REQUEST_FAILURE], 
    promise: sendRequest(itemId), 
    userId 
    }; 
} 

// same middleware found in https://github.com/rackt/redux/issues/99 
export default function promiseMiddleware() { 
    return (next) => (action) => { 
    const { promise, ...rest } = action; 
    if (!promise) { 
     return next(action); 
    } 

    next({ ...rest, readyState: 'request'); 
    return promise.then(
     (result) => next({ ...rest, result, readyState: 'success' }), 
     (error) => next({ ...rest, error, readyState: 'failure' }) 
    ); 
    }; 
} 

maintenant, ma question est la suivante: Comment puis-je Rollback à l'état avant la asyncAction est envoyé, ce qui signifie essentiellement deux étapes retour dans l'état (réussite/échec => demande) w/un api appel à annuler l appel ast d'api. Par exemple, après avoir supprimé un élément todo (qui est une action asynchrone), une barre d'options contextuelle affiche une option undo, après avoir cliqué dessus, l'élément todo supprimé sera ajouté à l'interface utilisateur avec un appel api pour l'ajouter retour à db.

J'ai essayé redux-undo mais je pense qu'il n'est pas destiné à résoudre des problèmes comme celui-ci.
Ou devrais-je oublier 'annuler' et juste envoyer une nouvelle action addTodo lorsque l'utilisateur clique sur l'option Annuler?

Merci à l'avance :-)

Répondre