L'idea di componenti intelligenti e muti in Elm

Question

Mi piace il concetto di React/Redux 'di componenti intelligenti e stupidi, in cui un componente stupido non gestisce il proprio stato (il componente di scarico non sa nulla del mondo esterno, tutto ciò che fa sta attivando un evento e sta visualizzando il valore in base al suo input). Questo è banale perché tutto lo stato è gestito in un unico posto (riduttore principale).

In Elm, ogni componente ha una propria funzione di 'aggiornamento' (simile al riduttore di Redux), quindi non sembra banale usare lo stesso (stupido modello di componenti smart &).

L'utilizzo di componenti di scarico smart & è una buona pratica in Elm? In tal caso, avrò dei componenti senza il metodo 'update'? Mi chiedo come faccio a passare i dati (oggetti di scena) al mio componente e come attiverò gli eventi al componente principale.

Mi piacerebbe sentire i vostri pensieri.

Answer 1

Un'altra distinzione Smart/Dumb che è possibile fare è tra i componenti che restituiscono Effects e quelli che non lo fanno. Ma per rispondere alla tua domanda ...

niente vieta di definire le azioni in un bambino

type Action 
    = Submit 
    | Click 

e nella controllante view avendo

Child.view (Signal.forwardTo address ChildAction) props 

(passiamo props perché non ci sono i dati del modello come tale da passare)

ma poi gestire tutte le azioni in Parent update:

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

Ciò sarebbe comunque essenziale se l'impatto di un'azione in Child dovesse cambiare lo stato in Parent o qualche altro figlio di Parent.

Answer 2

The Elm equivalente di un "componente muto" (aka Presentational, Pure, Skinny componente) è semplicemente una funzione che produce Html:

view : ... -> Html 

La biblioteca elm-html è scritto in questo stile, per esempio,

button : List Attribute -> List Html -> Html 

È possibile impostare gli "oggetti di scena" fornendo gli attributi quando si chiama la funzione. In particolare, si registra eventi per i gestori che forniscono in List Attribute:

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

vedrete questo modello anche in altre biblioteche, anche se il tipo esatto può essere differente da List Attribute e List Html.