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.