Elm - Comandi
Nei capitoli precedenti, abbiamo discusso i vari componenti dell'architettura Elm e le loro funzioni. L'utente e l'applicazione comunicano tra loro utilizzando Messaggi.
Considera un esempio, in cui l'applicazione deve comunicare con altri componenti come un server esterno, API, microservizi, ecc. Per soddisfare la richiesta dell'utente. Ciò può essere ottenuto utilizzando i comandi in Elm. I messaggi e i comandi non sono sinonimi. I messaggi rappresentano la comunicazione tra un utente finale e l'applicazione mentre i comandi rappresentano il modo in cui un'applicazione Elm comunica con altre entità. Un comando viene attivato in risposta a un messaggio.
La figura seguente mostra il flusso di lavoro di un'applicazione Elm complessa:
L'utente interagisce con la vista. La vista genera un messaggio appropriato in base all'azione dell'utente. Il componente di aggiornamento riceve questo messaggio e attiva un comando.
Sintassi
La sintassi per definire un comando è la seguente:
type Cmd msg
Il messaggio generato dalla visualizzazione viene passato al comando.
Illustrazione
Il seguente esempio fa una richiesta a un'API e visualizza il risultato dall'API.
L'applicazione accetta un numero dall'utente, lo passa all'API Numbers. Questa API restituisce fatti relativi al numero.
I vari componenti dell'applicazione sono i seguenti:
Modulo HTTP
Il modulo Http di Elm viene utilizzato per creare e inviare richieste HTTP. Questo modulo non fa parte del modulo principale. Useremo il gestore di pacchetti elm per installare questo pacchetto.
API
In questo esempio, l'applicazione comunicherà con l'API Numbers - "http://numbersapi.com/#42".
Visualizza
La visualizzazione dell'applicazione contiene una casella di testo e un pulsante.
view : Model -> Html Msg
view model =
div []
[ h2 [] [text model.heading]
,input [onInput Input, value model.input] []
, button [ onClick ShowFacts ] [ text "show facts" ]
, br [] []
, h3 [][text model.factText]
]
Modello
Il Modello rappresenta il valore inserito dall'utente e il risultato che verrà restituito dall'API.
type alias Model =
{ heading : String
, factText : String
, input :String
}
Messaggio
L'applicazione ha i seguenti tre messaggi:
- ShowFacts
- Input
- NewFactArrived
Facendo clic sul pulsante Mostra fatti , il messaggio ShowFacts viene passato al metodo di aggiornamento. Quando l'utente digita un valore nella casella di testo, il messaggio di input viene passato al metodo di aggiornamento. Infine, quando viene ricevuta la risposta del server Http, il messaggio NewFactArrived verrà passato all'aggiornamento.
type Msg
= ShowFacts
|Input String
| NewFactArrived (Result Http.Error String)
Aggiornare
Il metodo update restituisce una tupla, che contiene il modello e gli oggetti comando. Quando l'utente fa clic sul pulsante Mostra fatti, il messaggio viene passato all'aggiornamento che quindi chiama NumbersAPI.
update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
case msg of
Input newInput ->
(Model "NumbersApi typing.." "" newInput ,Cmd.none)
ShowFacts ->
(model, getRadmonNumberFromAPI model.input)
NewFactArrived (Ok newFact) ->
(Model "DataArrived" newFact "", Cmd.none)
NewFactArrived (Err _) ->
(model, Cmd.none)
Funzione di aiuto
La funzione di supporto getRandomNumberFromAPI richiama NumbersAPI e gli passa il numero inserito dall'utente. Il risultato restituito dall'API viene utilizzato per aggiornare il modello.
getRadmonNumberFromAPI : String->Cmd Msg
getRadmonNumberFromAPI newNo =
let
url =
"http://numbersapi.com/"++newNo
in
Http.send NewFactArrived (Http.getString url)
Sr. No. | Metodo | Firma | Descrizione |
---|---|---|---|
1 | Http.getString | getString: String -> Request String | Crea una richiesta GET e interpreta il corpo della risposta come una stringa. |
2 | Http. Invia | invia: (Errore risultato a -> msg) -> Richiedi a -> Cmd msg | Invia una richiesta Http. |
principale
Questo è il punto di ingresso del progetto Elm.
main =
Html.program
{ init = init
, view = view
, update = update
, subscriptions = subscriptions
}
Mettere tutto insieme
Step 1 - Crea la cartella CommandApp e il file CommandDemo.elm.
Step 2- Installa il modulo http usando il comando elm package install elm-lang / http .
Step 2 - Digita il contenuto per CommandDemo.elm come mostrato di seguito -
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Http
main =
Html.program
{ init = init
, view = view
, update = update
, subscriptions = subscriptions
}
-- MODEL
type alias Model =
{ heading : String
, factText : String
, input :String
}
init : (Model, Cmd Msg)
init =
( Model "NumbersAPI" "NoFacts" "42"-- set model two fields
, Cmd.none -- not to invoke api initially
)
-- UPDATE
type Msg
= ShowFacts
|Input String
| NewFactArrived (Result Http.Error String)
update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
case msg of
Input newInput ->
(Model "NumbersApi typing.." "" newInput ,Cmd.none)
ShowFacts ->
(model, getRadmonNumberFromAPI model.input)
NewFactArrived (Ok newFact) ->
(Model "DataArrived" newFact "", Cmd.none)
NewFactArrived (Err _) ->
(model, Cmd.none)
- VIEW
view : Model -> Html Msg
view model =
div []
[ h2 [] [text model.heading]
,input [onInput Input, value model.input] []
, button [ onClick ShowFacts ] [ text "show facts" ]
, br [] []
, h3 [][text model.factText]
]
-- SUBSCRIPTIONS
subscriptions : Model -> Sub Msg
subscriptions model =
Sub.none
-- HTTP
getRadmonNumberFromAPI : String->Cmd Msg
getRadmonNumberFromAPI newNo =
let
url =
"http://numbersapi.com/"++newNo
in
Http.send NewFactArrived (Http.getString url)
Step 4 - Aziona il comando.
C:\Users\dell\elm\CommandApp> elm make .\CommandDemo.elm
Questo genererà il file html come mostrato di seguito.