如何使用React，Redux和Redux-Saga实现乐观状态更新/推送

问题描述：

我试图实现乐观状态更新，所以我立即更新状态更新操作，然后执行撤消&通知用户如果更新请求失败。如何使用React，Redux和Redux-Saga实现乐观状态更新/推送

我有以下的工人和守望者传奇：

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

我传递currentState在行动，所以我可以推回到它的请求失败的情况。

这种方法的问题在于，UPDATE_ITEM_OPTIMISTICALLY操作在解析之前解决了saga代码和meta.currentState，然后在catch块中使用它之前更新。

我不太明白这个问题：你把你的currentState放在action（UPDATE_ITEM）中，执行一个UPDATE_ITEM_OPTIMISTICALLY，然后做一个API调用。当调用失败时，您将使用操作中的当前状态执行UNDO_UPDATE_ITEM。那currentState如何可以不同？它包含在您的动作（元字段）中，就像您在分派UPDATE_ITEM调用时一样。 –

我想在action.meta.currentState中保存当前状态 - 更新前的状态。它并没有不同，因为减速器在传奇跑之前首先被击中。我有一个想法，如果在调用失败时发送currentState在动作创建器中能够撤销到该状态。例如，我正在编辑项目属性，并希望立即显示编辑效果，而不是等待API确认这些更改已保存。如果API返回错误，我想撤销状态回到action.meta.currentState。你对于乐观状态更新和最终状态撤消建议采用哪种方法？ – vladimirp

答

两个解决方案：

传递currentState的深层复制到行动的有效载荷（有点慢）
保持第二场在减速称为prevState并指定你目前的状态需要给它的道具，然后在你的传奇中使用它

如何使用React，Redux和Redux-Saga实现乐观状态更新/推送

相关推荐