2017-09-05 12 views
2

私はこの質問のさまざまなバリエーションを参照していますが、私の状況では実際には何も私をクリックしていません。私はReactにかなり新しいです。そして、私は "React Way"またはベストプラクティスと見なされるものを見たいと思っていました。Reactを使用して親コンポーネントを正しく更新する方法

高レベルの観点からは、入力用のモーダルをトリガーするボタンを備え、機能を使用して新しいユーザーを追加できる「ユーザー」テーブルがあります。ここで

は、コンポーネントの私の現在のツリーです:

. 
└── UserLayout 
    ├── AddNewUserButton 
     └── UserModal 
    └── UserGrid 
     └── UserGridBody 
      └── UserGridRow 

UserLayoutは国家としての私のユーザーの初期GETを行い、コンポーネントはpropsとして渡される私の子供を更新するコンポーネントです。

UserModalは入力を処理し、POSTをAPIに処理します。

私の質問は、私のUserModalコンポーネントのPOSTの後にユーザーテーブルの更新をどうすればいいですか。状態を再設定する子コンポーネントにコールバック関数を渡す例を見てきましたが、この状況では2つのレベルのコンポーネントを介して行う必要があり、おそらく私の状態駆動コンポーネントを不適切に考えていると思います私は試したことが真実であることについていくつかアドバイスを受けたいと思っていました。ベストプラクティスとは何ですか?

すべてのコードを投稿するともっと役立つかどうかを教えてください。私はこのタイプの質問には必要ではないと思っていましたが、それが私の問題をよりよく説明するのに役立つなら、確かにそれを行うことができます。

+3

はい、これを実行する唯一の実行可能な "バニラリアクションウェイ"コンポーネントを小道具を介して下に通す。一度に1つのコンポーネント。これは1つ、おそらく2つのレベルのためにうまく動作します。しかし、アプリが複雑な場合や、このシナリオが非常に一般的な場合は、[redux](http://redux.js.org/)や[MobX](https:// mobx.js.org/)。このようなライブラリがさらにありますが、この2つが最も一般的です。彼らはどちらも長所と短所があり、あなたが決定する前にそれぞれについていくつかの調査をしたいと思うかもしれません。 SOの[tag:redux]と[tag:mobx]もチェックアウトすることができます。がんばろう! – Chris

+0

Chrisが言ったように、Flux、Redux、またはMobXを使って、深いデータが流れているようなシナリオを試すことができます。 –

+0

@Chris - 私の考えで確認していただきありがとうございます。私は2つの層がひどいとは思わないが、間違いなく私の状態を適切に維持することをより誠実にしている。あなたのための最後の質問...最新のユーザーを州のユーザーの配列にプッシュするのが最善でしょうか?または、すべてのユーザーを再び戻して、そのように状態をリセットする必要がありますか? – scapegoat17

答えて

0

コールバックをReactで渡すのが一般的です.2レベルまたは3レベルでも例外ではありません。しかし、コールバックを渡すときにツリーが退屈になったり、後でトレースするのが難しくなり、データを格納するための外部状態を持つことが良い考えです。状態は、特定の構造を持つことやそれを動作させるためにデータを渡す必要なしに、プロジェクト内のすべてのコンポーネントにわたって共有することができます。

This articleは、ローカルコンポーネントの状態が複雑すぎてエラーが発生しやすくなった場合に「壁に直面」したときの理解に役立ちます。 (それについてはreduxですが、MobXのような他の状態管理ライブラリを使って同じ問題を解決しようとするときに参照することもできます)

関連する問題