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