2016-04-23 19 views
5

スマートコンポーネントとダムコンポーネントのReact/Reduxのコンセプトが好きです。ダムコンポーネントは独自の状態を処理しません(ダンプコンポーネントは外界について何も知らないイベントをトリガーし、その入力に従って値を表示しています)。これはすべての州が1カ所(主減速機)で処理されているので簡単です。Elmのスマートとダムコンポーネントのアイデア

Elmでは、各コンポーネントに独自の '更新'機能(Redux 'reducerに似ています)がありますので、同じ(ダム&スマートコンポーネントパターン)を使用するのは簡単ではないようです。

スマート&ダンプコンポーネントを使用しているのは、Elmでは良い方法ですか?もしそうなら、私は '更新'メソッドのないコンポーネントを持っていますか?どのようにデータ(小道具)をコンポーネントに渡し、イベントを親コンポーネントにトリガーするのだろうと思います。

私はあなたの考えを聞くのが大好きです。

答えて

3

別のスマート/ダムの区別は、Effectsを返すコンポーネントとそうでないコンポーネントの間で行うことができます。しかし、あなたの質問に答えるために...

何もなしモデルデータが存在しないので、あなたが子供

type Action 
    = Submit 
    | Click 

でアクションを定義し、

Child.view (Signal.forwardTo address ChildAction) props 

は(我々はprops渡した親viewで停止しませんそのように渡す)

しかし、親のupdateのすべてのアクションを処理:

case action of 
    ChildAction act -> 
    case act of 
     Child.Submit -> 
     ... 
     Child.Click -> 
     ... 

これは、子どものアクションが親または親の他の子供の状態を変更することであった場合には、これは必須です。

+0

子供が送信を処理し、保護者が処理する場合はどうすればよいですか?子供の更新機能はどのように見えますか?特にClickとは何ですか? – Seth

+0

あなたが言っていることは、子供がクリックでは何もしないということです。つまり、実際には実行されないかもしれませんが、「クリック - >モデル」です。ブラウザでは、実装されていないままにすることはできません。 –

+0

Selectメッセージ(CSSクラスを追加する)を処理するが、親にClickメッセージを処理させたいと望むタブを想像してください。あなたはそうです、ElmはClickパターンマッチをスキップさせません。 – Seth

4

"ダムコンポーネント"(別名Presentational, Pure, Skinny部品)のエルム同等物が単にHtmlを作り出す機能である:

view : ... -> Html 

elm-htmlライブラリはこのスタイルで書かれている、例えば、

button : List Attribute -> List Html -> Html 

関数を呼び出すときに属性を指定して、「小道具」を設定します。特に、あなたはList Attributeでハンドラを供給することで、イベントを登録します。

button 
    [ onClick addr ClickAction ] -- event handler 
    [ text "Click me" ]   -- child "components" 

正確な種類がList AttributeList Htmlは異なるかもしれないがあなたは、他のライブラリでも、このパターンが表示されます。