18

スマート/ダンプ コンポーネントを使用して Redux (NgRx) アプリを構築していますが、ダム コンポーネントをどのように「ダム」にするかを決めるのに苦労しています...

たとえば、ダム コンポーネント( ) を含むスマート コンポーネント( posts) があり、ダム コンポーネント( )post-listが含まれています。ここまでは、すべてが良さそうです。post

いくつかのボタンを表示するには、ユーザーが存在するかどうかを知る必要があり、プロパティを からまでずっとadmin渡す必要があります。adminpostspost

postダム コンポーネントをストアに接続して、ダム コンポーネントから直接取得できますか。それとも、この場合のコンポーネントはもう馬鹿げていますか? 次のようになります。

  private admin$: Observable<boolean>;
  constructor(private store: Store<AppState>){
    this.admin$ = this.store.let(isAdmin());
  }

これにより、冗長性が大幅に節約されると思います。これは良い習慣ですか、それとも悪い習慣ですか?

4

3 に答える 3

7

ダム コンポーネントは、ロジックのないプレゼンテーション コンポーネントである必要があります。

Redux の作者であるDan Abramov 氏によると、ダム コンポーネントは次の基準に一致します。

  • 物事がどのように見えるかに関心があります。
  • 内部にプレゼンテーション コンポーネントとコンテナー コンポーネント**の両方が含まれる場合があり、通常は独自の DOM マークアップとスタイルが含まれます。
  • 多くの場合、this.props.children による封じ込めを許可します。
  • Flux アクションやストアなど、アプリの残りの部分に依存しません。
  • データのロード方法または変更方法を指定しないでください。
  • props を介して排他的にデータとコールバックを受信します。
  • 独自の状態を持つことはめったにありません (存在する場合、それはデータではなく UI 状態です)。
  • 状態、ライフサイクル フック、またはパフォーマンスの最適化が必要でない限り、機能コンポーネントとして記述されます。
  • 例: ページ、サイドバー、ストーリー、UserInfo、リスト。

角度のある

情報を表示し、入力ストリームと出力ストリームによってイベントを処理するだけです。

したがって、私の推奨事項は、スマートでダムのngrxサンプルアプリをチェックアウトすることです: https://github.com/ngrx/example-app

また、ゲームでスマートとダムを どのように実装したかを見ることができます。https://github.com/wizardnet972/tic-tac-toe

注: コンテナー コンポーネントも再利用可能です。コンポーネントがプレゼンテーション コンポーネントであるかコンテナ コンポーネントであるかは、実装の詳細です。

プレゼンテーション コンポーネントは、@Input() を介してデータを受け取り、@Output() を介してイベントを通信しますが、通常、独自の内部状態を保持しません。すべての決定は、データの更新が元に戻る前に、「コンテナー」または「スマート」コンポーネントに委任されます。

お役に立てば幸いです。

于 2016-10-17T21:06:42.517 に答える
1

この質問は、React/Flux やレガシー Angular 1.x アプリ (通常はhttps://github.com/angular-redux/ng-reduxなどを介して) を含むクライアント側フレームワークに適用され、多くのものと同様に、答えは、ユースケースに依存するということです。

しかし、あなたは2つの質問をしました。コンポーネントがどれだけダムであるべきか、コンポーネントがそもそもダムであるべきかどうかを判断する最善の方法。

質問 1: コンポーネントが最初にダムであるべきかどうかを判断する最善の方法については、次のとおりです。

あなたの特定のケースでは、私は質問をします: 投稿リストまたは投稿コンポーネントは投稿の外部で使用されますか? そうです、最上位の「レベル」をスマートコンポーネント (コンテナとも呼ばれます) にします。たとえば、Post が Post List の内部でのみ使用され、Post List が Post の外部で使用される可能性がある場合、Post List はスマートなコンポーネントであり、他のコンポーネントに簡単に「ドロップ」できるようにする必要があります。

ただし、これは一般的なアプローチの例です。ダム コンポーネントがスマート コンポーネントの上または兄弟として存在する可能性があるかどうかを確認し、存在する場合は昇格し、そうでない場合はダム コンポーネントのままにします。

質問 2: ダムコンポーネントはどの程度「ダム」であるべきか:

ダム コンポーネントには、変更されるものすべてを渡す必要があり、ベスト プラクティスとして、ユーザー アクションに基づいて発生する可能性のあるイベントを呼び出すメソッドを渡す必要があります。

例: テキスト、画像、またはメディアがアプリの状態の変化に基づいている場合、このデータをコンポーネントに渡す必要があります。また、ボタン、リンク、フォーム、またはその他のクリック可能な要素が存在する場合は、少なくともオプションのコールバック/メソッドを渡してこれらを呼び出すことで、コンポーネントのユーザー (それがあなたであっても) に、アプリの要件が大きくなるにつれて将来の柔軟性が提供されます。

于 2016-07-26T00:26:00.133 に答える
1

「ダム」は、別のコンテキストで再利用できると思います。

ダムは、その親にのみ関心があります。

angular 2を使用して自分自身に繰り返し唱えるマントラ。複雑で混乱している場合は、戦略を再考してください。

別のレベルのコンポーネントについてはどうですか。管理者モードは 1 つの子であり、非管理者は別の子です。これらの子コンポーネントは、入力を介してデータを取得し、出力を介して出力できます。

于 2016-07-30T19:25:13.763 に答える