2017-10-20 4 views
0

私は楽観的な状態の更新を実装しようとしているため、更新アクションで即座に状態を更新してから取り消しを実行します。&更新要求が失敗した場合に通知します。私は労働者とウォッチャーサガ次いるReact、Redux、Redux-Sagaを使用して楽観的状態を更新/プッシュする方法

:私はアクションでcurrentStateのを渡しています

// 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); 
} 

ので、私は、要求障害が発生した場合にそれに戻ってプッシュすることができます。

このアプローチの問題は、サガコードの前にUPDATE_ITEM_OPTIMISTICALLYアクションが解決され、meta.currentStateがキャッチブロック内で使用される前に更新されることです。

+0

私は実際にはあなたのcurrentStateをアクション(UPDATE_ITEM)に入れ、UPDATE_ITEM_OPTIMISTICALLYを実行してAPI呼び出しを行います。呼び出しが失敗すると、アクションの現在の状態でUNDO_UPDATE_ITEMを実行します。 そのcurrentStateはどのように異なっていますか?これはUPDATE_ITEM呼び出しをディスパッチしたときのアクション(メタフィールド)に含まれています。 –

+0

私は、更新前のaction.meta.currentState - stateに現在の状態を保持すると考えました。サゲが走る前に減速材が最初に打たれているので違いはありません。呼び出しが失敗した場合、その状態に元に戻すことができるように、アクション作成者にcurrentStateを送信するアイデアがありました。たとえば、アイテムの属性を編集していて、すぐに編集エフェクトを表示し、その変更が保存されたことをAPIが待つのを待たずにいます。 APIからエラーが返された場合、状態を元に戻してaction.meta.currentStateに戻したいと思います。楽観的な状態の更新と最終的な状態の取り消しに対して、どのアプローチをお勧めしますか? – vladimirp

答えて

1

2種類の溶液:

  1. がアクションペイロードにcurrentStateの深いコピーを渡し(遅いの一種)
  2. はprevStateと呼ばれる自分の減速で2番目のフィールドを維持し、あなたがそれに現在の状態から必要な小道具を割り当てますあなたのサガでそれを使用してください
関連する問題