AJAX呼び出しをプレゼンテーションコンポーネントに入れることはできますか、またはコンテナを抽出する必要がありますか？

Question

私はReactで可能な限りきれいに物事を整理する方法を考えるのに多くの時間を費やします。最近、ReactコンテナがRedux（または他のデータ - Meteor）に接続して単一のコンポーネントをレンダリング/返すか、またはコンテナがイベント処理も担当する必要があるかどうかを調べています。だから、例えば、これら2つのモデル間のトスアップだ：

モデル1

// ThingContainer.js 

import Thing from '../components/Thing'; 
export default someHigherOrderFunc(/* map state/data to props */)(Thing) 

// Thing.js 

export default class Thing extends Component { 
    handleClick() { /* ... */ } 
    handleMouseEnter() { /* ... */ } 
    render() { 
    // Other components rendered here, both container or presentational 
    } 
} 

モデル2

// ThingContainer.js 

class ThingContainer extends Component { 
    handleClick() { /* ... */ } 
    handleMouseEnter() { /* ... */ } 
    render() { 
    // Now Thing can be stateless 
    return <Thing 
     onClick={this.handleClick} 
     onMouseEnter={this.handleMouseEnter} 
    /> 
    } 
} 

export default someHigherOrderFunc()(ThingContainer) 

は、それはほとんどThingは内に独自のコンテナになり、モデル1でのように感じています私は私が好きではないかと思う感覚。モデル2は、より自然な感じです。ThingContainerは、データとReduxを処理するだけでなく、イベントを処理し、componentDidMountなどでAjaxリクエストを発生させるなどの費用がかかります。最初のモデルでは、AjaxリクエストをcomponentDidMountで呼び出したい場合、それは右に見えないThingに入る必要があります。

これらのアプローチのいずれかに特有の利点や落とし穴があるのか​​、それとも単にスタイル/プリファレンスになるのか不思議です。

Answer 1

"presentational-ish" Thingの中にAJAXを実行することに本質的に間違っていることは何もありません。これは、ほんの2つの方法であり、このコンポーネントは決して異なるシナリオで使用されることはありません。確かめる前に動作をプレゼンテーションから分割しないでくださいどうすれば異なるコンテキストで動作が変わりますか。

このジレンマがあるということは、コンポーネントをまだ再利用する必要がないことを意味します。この場合、どのように分割するかは関係ありません。両方の方法がうまくいくので、私は単純なモデル（モデル1）に行きます。

後で、同じlook-n-feelを再利用したいが、異なるAJAX呼び出しをトリガーするか、別々に小道具を計算したいと思うかもしれません。この時点で、イベントの処理をThingから削除し、それぞれ異なるイベントを処理している小道具と計算方法を少し異ならせていくつかの異なるThingContainerを作成することができます。これは、プレゼンテーションとビヘイビアの分離が有用になるときです。