在Redux商店中驗證數據

Question

我試圖驗證表單中的redux商店中的數據。什麼是最好的方式去做這件事。到目前爲止，我有幾個想法：

1. 驗證操作必須綁定到某種類型的監聽器，如onBlur或onChange。一旦表單組件模糊，則會進行驗證。然而，驗證函數然後可以1）只驗證隔離的字段或2）必須通過完整的表單狀態。另外，動作創建者不能/不應該訪問新的狀態，所以我只能更新現有的數據，而且我不能將驗證器綁定到更新狀態的東西上。一個好處是，我可以通過調用驗證器動作創建器並返回一個promise（使用redux-promise/thunk）來執行異步驗證。

2. 減速機驗證它自己的數據。 reduce的第1部分將更新數據，第2部分將分析狀態並更新錯誤。但是，這會降低縮減器的純度，因爲更新狀態的一部分然後更新狀態的另一部分。所以我必須確保驗證器在狀態更新後運行。

3. 使用選擇器從狀態導出錯誤。如果顯示無效/有效的錯誤，數據本身不會改變。但是，由於選擇器是同步的，我不能進行任何異步驗證。

Answer 1

可以在減速所有領域的存儲與形狀：

"fields": { 
    "first_field": { 
     "error": null, //stores error that should be shown in form 
     "touched": false, //becomes true when onBlur event fired for this field, 
     "value": "", //input value 
    }, 
    ... 
} 

在這種情況下，你可以運行整個表單驗證和確認具有touched: true各個領域。實際上，您所描述的所有問題都已在redux-form中解決，我建議您使用它。