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

Question

>我正在尝试实现乐观状态更新，因此我在更新操作时立即更新状态，然后在更新请求失败时执行撤消并通知用户。

我有以下工人和观察者传奇：

// 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操作在 saga 代码之前解析，然后 meta.currentState 在 catch 块中使用之前更新。

Answer 1

两种解决方案：

1. 将当前状态的深层副本传递给操作有效负载（有点慢）
2. 在你的化简器中保留一个名为prevState的第二个字段，并将当前状态所需的道具分配给它，然后在你的传奇中使用它