Redux-Saga的状态变更

Question

我有一个简单的React App。 它允许用户编辑表单以更新数据库中的数据。 在“提交”页面上，将使用表单数据生成一个操作。 Redux Saga屈服于该动作并异步更新数据库。 所有这一切。

但是，在一种情况下，更新会涉及更多一点。 不仅必须添加新数据，而且必须通过一系列API调用从数据库中删除在表单上删除的所有数据。 为此，我需要知道已更改的内容（例如已删除的内容），而不仅仅是新的状态。

我的传奇人物如何访问此信息？ 我可以在化简器中计算它，因为它可以访问先前的状态，但是通常认为它是化简器的反模式，然后可以分派新操作。

Answer 1

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中保持“临时”或“草稿”状态的一个很好的理由，这样您就可以在逻辑中同时使用“当前”和“草稿”值。

我在自己的博客文章《 实用的Redux，第7部分：表单更改处理，数据编辑以及功能减少者和实用的Redux，第8部分：表单草稿数据管理》中讨论了一些相关概念。

Answer 2

...必须通过一系列API调用从数据库中删除在表单上删除的所有数据。 为此，我需要知道已更改的内容（例如已删除的内容），而不仅仅是新的状态。

如果我正确理解，您将表单状态保存在redux存储中，那么您需要知道何时以及发生了什么更改。 您可以创建自己的观察者传奇：

function* watchFormUpdates(){
  while (true) {
    const oldFormState = yield select(selectors.selectFormState);
    const action = yield take (actionTypes.FORM_UPDATE); // wait until action is dispatched
    const newFormState = yield select(selectors.selectFormState); // at this point store has been updated
    // compare oldFormState with newFormState...
    if(oldFormState.hasSubscription && !newFormState.hasSubscription) {
      yield fork(deleteSubscriptionSaga); // start non-blocking worker task
      // or just dispatch action - yield put(actionCreators.deleteSubscription());
    }
  }
}