我應該使用 redux-form 存儲而不是組件狀態和 Redux 自定義存儲嗎？

Question

我相信在任何應用程序中都應該有一個事實來源。

---

我的應用程序將有

• 90 多種交易表格和 150 份報告
• 復雜的數據結構（父級、子級、計算）

---

所以在 React 中，我發現了三個令人困惑的地方來存儲狀態：

1. 組件狀態-使用的時候，我們不希望共享數據
2. Redux 自定義存儲（由開發者管理） ——當我們想要共享數據時使用
3. Redux-form 存儲（由 redux-form 管理） - 用於驗證

我開始僅使用 redux 表單進行驗證，然后當它允許我訪問 redux-form 存儲以獲取數據時我感到困惑，因為我已經從組件狀態訪問數據，也從我在 redux 中的自定義存儲訪問數據

1. Redux 表單不注冊隱藏字段。 要注冊隱藏字段，您必須創建一個具有禁用屬性的字段等。

2. 如果您進行任何計算，例如，AMOUNT = QTY * RATE; 這里用戶將輸入 QTY 和 RATE 並且將計算 AMOUNT。 在這里它會立即反映在組件狀態中，但不會反映在 redux-form 狀態中。 為了讓它以 redux 形式反映，我們必須開火。

   this.props.dispatch(change('Invoice', 'amount', 55))

3. 並非總是可以避免組件狀態，如果我編寫計算公式代碼將如下所示

   只有 Redux 形式的狀態

   const amount = someReduxFormApiGet(QTY) + someReduxFormApiGet(RATE) this.props.dispatch(change('Invoice', 'amount', 55))

   僅反應狀態

   onChange(){ will have set QTY & RATE in component state} const amount = this.state.QTY * this.state.RATE

   結論：如果我使用redux-form我將不得不編寫額外的代碼來使 redux-store 保持同步穩定，作為 React 組件中的狀態，我將使用handleChange()函數在this.state繪制狀態. 也覺得我將在組件狀態中有很大的靈活性

4. 如果我的數據模型變得更加復雜，那么在 redux-form 存儲中管理將非常困難。 然后在這里我想不使用redux 自定義存儲或組件狀態

5. 其他驗證 React 輸入的庫沒有使用 Redux 來實現驗證。 它只是使用 redux 來管理驗證的 redux-form。

所以我得出的結論是

• Redux-form 的誕生只是為了驗證，而不是為了管理復雜的數據模型。

• 復雜的數據模型應該在 redux 自定義存儲或組件狀態中進行管理，而不是 Redux-form

• 從 Redux-form 的文檔來看，它可以很好地處理驗證，但出於數據建模的目的，它建議的解決方案並非 100% 直接

需要幫助做決定

我應該使用 redux-form 存儲進行數據建模嗎

或

僅用於驗證

和

使用組件狀態和自定義 redux 存儲來建模數據？

Answer 1

感謝erikas提供美麗的圖書館。 自從它在近兩年前出生以來，我一直在使用。

我個人不使用 redux-form 進行數據操作。 我通過 onChange 設置狀態在組件狀態下自行完成。 當我開始了解 redux 形式的數據存儲時，我最初使用它，但隨着我的用例增長，我必須將數據存儲轉換為組件狀態。 React 中的數據建模是您需要學習的東西，它不會憑空而來。 但是一旦你這樣做了，你就永遠不會Overrated state management in React感到困惑

如果您正在執行Data modelling, dependent computations我將建議對數據使用組件狀態。

拇指規則：

• 通過應用程序僅使用一個商店來存儲狀態
• 如果使用Component state則不要使用redux-form狀態（推薦）
• 如果使用redux-form state則不要使用Component state （限制 - 點 1,2,3 和場景管理商店背后的代碼臟魔術）
• 你是對的。 它為驗證而生，所以用它來驗證。
• 使用redux custom store作為toggle, user sign-in global data風格。 但不是用於存儲實際的事務表單狀態（限制 - 會過度編碼）。

• 如果您的應用程序會很復雜，我建議您使用

  • component狀態 - 帶有 onChange 的實際表單狀態

  • redux - 在 mngt 中將其用於全局（切換、發布草稿、僅用戶登錄信息）

  • redux-from - 僅用於驗證而不是作為提交的數據存儲

  • 我也不鼓勵你在redux custom store保持繁重、復雜、狀態和事務表單狀態。 就像冰淇淋澆頭一樣使用它。

優點：組件狀態 - 對數據的完全控制，進出的靈活性，幕后沒有魔法

缺點：我沒有找到

結論： redux-form基本上是讓very newbies快速完成工作的，但是當涉及到計算、依賴字段、商業數據建模時， redux-form不是選項。 但是，即使您很快就使用redux-form進行數據操作，您最終也會使用（不可忽略的component state + redux-form state + redux custom state ）散布在各處，混亂不堪。

注意：我喜歡下面的@vijays 回答react-chopper庫，它符合您的所有計算要求。此外，它比mobx和其他庫好 100%，因為它們弄臟了代碼

但是這個 react-chopper 的例子是安靜的令人印象深刻

感覺 100% 像 angular。但它的單流從內部

免責聲明： react-chopper仍在開發中，只能用於簡單到中等的用例。

Answer 2

我建議僅將 Redux-Form 用於數據的收集和驗證。 在適當的時候使用您自己的組件狀態和/或自定義 redux 存儲。

您僅將 redux 用於要共享的狀態是正確的。 保持簡單和可重用。

好讀：

https://goshakkk.name/should-i-put-form-state-into-redux/

https://hackernoon.com/using-forms-in-react-redux-tips-and-tricks-48ad9c7522f6

https://medium.com/dailyjs/why-build-your-forms-with-redux-form-b​​cacbedc9e8

Answer 3

如果您不需要執行異步任務，即異步表單驗證，那么創建自定義表單生成器組件很容易，而不是使用復雜得多的 redux-form，添加額外的樣板層並強制您使用 redux。 對於參考。 檢查它。 https://github.com/bietkul/react-native-form-b​​uilder

Answer 4

在令人沮喪的近七個月之后

我創建了一個新庫React-chopper 。

React 中革命性的雙向綁定，可以滿足任何業務對象的復雜性，幾乎就像 AngularJS。

享受！ 像 React 中的 AngularJS 一樣的代碼。