reactjs - Redux-Saga 中的状态变化

标签 reactjs redux redux-saga

我有一个简单的 React 应用程序。它允许用户编辑表单以更新数据库中的数据。提交时,页面会生成带有表单数据的操作。 Redux Saga 屈服于操作并异步更新数据库。这一切都有效。

但是,在一种情况下,更新会稍微复杂一些。不仅必须添加新数据,而且必须通过一系列 API 调用从数据库中删除表单上删除的任何数据。为此,我需要知道发生了什么变化(例如,已删除什么),而不仅仅是新状态。

我的传奇如何访问这些信息?我可以在 reducer 中计算它,因为它可以访问先前的状态,但它通常被认为是 reducer 然后调度新操作的反模式。

最佳答案

Sagas 有一个 select 效果可用,它只运行一个选择器函数并返回提取的状态。您可以使用它从 Redux 存储中检索旧的和新的项目,并从那里处理更改:

function* handleFormUpdates() {
    const oldItem = yield select(selectOldItem);
    const newItem = yield select(selectNewItem);

    const changes = diffTheItems(oldItem, newItem);

    // make API calls to deal with changes appropriately
}

总的来说,这是在 Redux 中保留“临时”或“草稿”状态的一个很好的理由,以便您可以在逻辑中使用“当前”和“草稿”值。

我在博客文章中讨论了一些相关概念Practical Redux, Part 7: Form Change Handling, Data Editing, and Feature ReducersPractical Redux, Part 8: Form Draft Data Management

关于reactjs - Redux-Saga 中的状态变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43635931/

相关文章:

javascript - 在 React js 中打开和关闭递归嵌套列表

javascript - react : Why should a parent component have to rerender to access child state changes?

javascript - 使用输入更新 reactjs 中的 redux 状态

javascript - 如何连接到数组中的 'indexed' 对象

reactjs - 如何使用 React Redux Hooks 加载 Spinner

javascript - Redux-Saga 调用不工作

javascript - 使用 Redux Saga 显示 HTTP 请求响应

javascript - react : Adding an object to an array in state through input fields

javascript - 如何使用 Jest/Enzyme 测试去抖功能?

javascript - 如何防止 redux-saga 调用我的 api 调用两次?