web-dev-qa-db-ja.com

コンポーネント状態とReduxカスタムストアの代わりにredux-formストアを使用する必要がありますか？

私はどんなアプリケーションでも、真実の源が1つあるべきだと信じています。

私のアプリは

  • 90以上の取引フォームと150のレポート
  • 複雑なデータ構造（親レベル、子レベル、計算）

Reactでは、状態を保存するのに3つの混乱する場所が見つかりました：

  1. コンポーネントの状態-データを共有したくない場合使用しない場合
  2. Reduxカスタムストア（開発者が管理） -データを共有する場合に使用します
  3. Redux-formストア（redux-formによって管理） -検証に使用

検証のためだけにreduxフォームを使い始めました、それからconfusedを得ましたコンポーネントの状態から、およびreduxのカスタムストアからもデータにアクセスしていたため、データのreduxフォームストアにアクセスできたとき

  1. Reduxフォームは非表示フィールドを登録しません。非表示フィールドを登録するには、無効な属性などのフィールドを作成する必要があります。

  2. 次のような計算を行う場合 、AMOUNT = QTY * RATE;ここでユーザーはQTYとRATEを入力し、AMOUNTが計算されます。ここでは、コンポーネントの状態にすぐに反映されますが、redux形式の状態には反映されません。それを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_を使用する場合、Reactコンポーネントの状態としてhandleChange()関数は、_this.state_で状態を描画します。また、コンポーネントの状態に多くの柔軟性があると感じます

  4. データモデルがさらに複雑になると、redux形式のストアでの管理が非常に難しくなります。次に、ここでは使用しないと考えていますreduxカスタムストアORコンポーネントの状態

  5. 検証する他のライブラリReact入力は、検証を実装するためにReduxを使用していません。検証を管理するためにreduxを使用しているだけのredux-formです。

それで私は結論に達しました

  • Reduxフォームは検証のためだけに生まれ、は複雑なデータモデルの管理のために生まれませんでした

  • 複雑なデータモデルはreduxカスタムストアで管理する必要がありますORコンポーネントの状態に応じて、Redux-formではなく

  • Reduxフォームのドキュメンテーションから、それは検証を非常にうまく処理しますが、データモデリングの目的では、100％単純ではないソリューションを提案しています

決定に助けが必要

データモデリングにredux-formストアを使用する必要がありますか

OR

検証に使用するだけ

そして

コンポーネント状態とカスタムreduxストアを使用してデータをモデル化しますか？

reactjsreact-nativereduxredux-form
15
vijay

美しいライブラリをありがとう erikas 2年近く前に生まれてから使っています。

私は個人的にデータ操作にredux-formを使用しません。 onChange設定状態でコンポーネント状態を自分でやります。 redux形式のデータストアを知ったとき、私は最初にそれを使用しましたが、使用例が増えるにつれて、データストアをコンポーネントの状態にシフトする必要があります。反応におけるデータモデリングは、あなたが学ぶ必要があるものです、それは魔法によってもたらされません。しかし、一度やれば、Overrated state management in Reactについて混乱することはありません。

Data modelling, dependent computationsを実行している場合は、データにコンポーネント状態を使用することをお勧めします。

親指のルール：

  • アプリで1つのストアのみを使用して状態を保存する
  • Component stateを使用している場合は、redux-form状態を使用しないでください（推奨）
  • redux-form stateを使用している場合は、Component stateを使用しないでください（制限-ポイント1、2、3、およびコードを管理している店の背後にある不潔なコードをコード化）
  • あなたが正しいです。検証のために作成されたので、検証に使用してください。
  • redux custom storeをtoggle, user sign-in global dataフレーバーとして使用します。ただし、実際のトランザクションフォームの状態を格納するためではありません（制限-コーディングよりも優先されます）。

  • アプリが複雑になる場合は、使用することをお勧めします

長所：コンポーネントの状態-データの完全な制御、出力される内容の柔軟性、舞台裏での魔法なし

短所：見つかりませんでした

結論：redux-formは基本的にvery newbiesが物事を迅速に行うためのものですが、計算、依存フィールド、商用データモデリング、redux-formはオプションではありません。しかし、データ操作にredux-formを使用しても、すぐに（component state無視できない+ + redux-form state + redux custom state）を使用することになり、混乱が生じます。 。

注：気に入った @ vijays answerreact-chopper 以下のライブラリ、それはすべての計算に適合しますまた、 mobx およびその他のライブラリよりも100％優れています。

しかし、この反応チョッパーの例は静かで印象的です

100％アンギュラーな感じですが、内側からユニフロー

免責事項： react-chopper はまだ開発中であり、シンプルから中規模のユースケースにのみ使用できます。

6
Mr punch

非同期タスク、つまり非同期フォーム検証を実行する必要がない場合は、非常に複雑なredux-formを使用する代わりに、カスタムフォームジェネレーターコンポーネントを簡単に作成できます。参考のために確認してください。 https://github.com/bietkul/react-native-form-b​​uilder

0
Kuldeep Saxena

苛立たしい7か月後

新しいライブラリ React-chopper を作成しました。

Reactの革命的な双方向バインディング。これは、AngularJSのように、あらゆるビジネスオブジェクトの複雑さに対応します。

楽しい！ ReactのAngularJSのようなコード。

0
vijay

データの収集と検証にのみ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

0
ovation22