2017-10-20 24 views
0

J'essaie d'implémenter une mise à jour d'état optimiste, je mets à jour l'état immédiatement lors de la mise à jour puis j'annule & notifier l'utilisateur si la demande de mise à jour échoue.Comment mettre en œuvre la mise à jour optimiste/push avec React, Redux et Redux-Saga

Je suit travailleur et veilleur Sagas:

// Worker Saga 
function* updateItem(action) { 

    // Update state optimistically 
    yield put({type: UPDATE_ITEM_OPTIMISTICALLY, payload: action.payload}); 

    try { 
      const response = yield call(axios.post, `${API_URL}/updateItem`, action.payload); 
     } catch (e) { 
      // Undo state push 
      yield put({type: UNDO_UPDATE_ITEM, payload: action.meta.currentState}); 
     } 
} 

// Watcher Saga 
function* rootSaga() { 
    yield takeEvery(UPDATE_ITEM, updateItem); 
} 

Je passe currentState en action, je peux pousser revenir en cas d'échec de la demande.

Le problème avec cette approche est que l'action UPDATE_ITEM_OPTIMISTICALLY se résout avant que le code saga et meta.currentState soit ensuite mis à jour avant son utilisation dans le bloc catch.

+0

Je ne comprends pas vraiment le problème: vous mettez votre stateState dans l'action (UPDATE_ITEM), effectuez un UPDATE_ITEM_OPTIMISTICALLY, puis faites un appel d'API. Lorsque l'appel échoue, vous effectuez un UNDO_UPDATE_ITEM avec l'état actuel de l'action. En quoi cet état actuel peut-il être différent? Il est inclus dans votre action (champ méta) comme lors de l'envoi de l'appel UPDATE_ITEM. –

+0

Je pensais maintenir l'état actuel dans action.meta.currentState - état avant la mise à jour. Ce n'est pas différent parce que les réducteurs sont frappés avant que les sagas tournent. J'ai eu une idée pour envoyer currentState dans le créateur d'action pour pouvoir annuler à cet état si l'appel échoue. Par exemple, je suis en train de modifier les attributs d'un objet et j'aimerais montrer immédiatement les effets d'édition sans attendre que l'API confirme que ces changements sont sauvegardés. Si l'API renvoie une erreur, je souhaite annuler l'état retour à action.meta.currentState. Quelle approche suggérez-vous pour les mises à jour d'état optimistes et l'annulation éventuelle de l'état? – vladimirp

Répondre

1

Deux solutions:

  1. Passer une copie en profondeur de currentState charge utile d'action (un peu lent)
  2. Gardez un second champ dans votre réducteur appelé prevState et affecter les accessoires dont vous avez besoin de l'état actuel de ce , alors utilisez-le dans votre saga