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

Question

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

我有以下 worker 和 watcher 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);
}

我正在传递 currentState，这样我就可以在请求失败的情况下返回它。

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

Answer 1

两种解决方案：

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

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

How to implement optimistic state update / push using React, Redux and Redux-Saga

reactjs

redux

redux-saga