CODEWITHSUNDEEP
elm
steel
steel

Reputation: 12520

Elm: Render with initial state

Using React and Redux, I can grab an initial state object off of window (and then disregard it / delete it after). This is useful for loading concepts like current user, or the URL's resource identifiers, e.g. :user_id (instead of parsing the URL in Redux to get them).

How can I render my Elm app with an initial state?

Upvotes: 2

Views: 694

Answers (2)

robertjlooby
robertjlooby

Reputation: 7220

You can pass in data to initialize your Elm application using the programWithFlags function to start the app. For example to initialize with a user id:

Elm:

module Main exposing (..)

import Html exposing (Html, div, h1, text)

main =
    Html.programWithFlags
        { init = init
        , view = view
        , update = update
        , subscriptions = (\_ -> Sub.none)
        }

-- MODEL

type alias Model =
    { userId : Int
    }

init : { userId : Int } -> ( Model, Cmd Msg )
init flags =
    -- This is the key piece. You can use the passed in "flags"
    -- record to build the initial state of your Model
    ( Model flags.userId, Cmd.none )

-- UPDATE

type Msg
    = NoOp

update : Msg -> Model -> ( Model, Cmd Msg )
update NoOp model =
    ( model, Cmd.none )

-- VIEW

view : Model -> Html Msg
view model =
    div [] [ h1 [] [ text ("User ID: " ++ toString model.userId) ] ]

Html:

<!DOCTYPE HTML>
<html>
  <head>
    <script type="text/javascript" src="elm.js"></script>
  </head>
  <body>
  </body>
  <script type="text/javascript">
    // The flags get passed in here
    Elm.Main.fullscreen({ userId: 42 });
  </script>
</html>

Upvotes: 3

Reactormonk
Reactormonk

Reputation: 21700

html + elm

<!DOCTYPE HTML>
<html>
  <head><meta charset="UTF-8"><title>Landing</title>
    <link rel="stylesheet" type="text/css" href="/semantic.min.css">
    <link rel="stylesheet" type="text/css" href="/styles.css">
    <script src="https://code.jquery.com/jquery-3.1.0.slim.min.js" integrity="sha256-cRpWjoSOw5KcyIOaZNo4i6fZ9tKPhYYb6i5T9RSVJG8=" crossorigin="anonymous"></script>
    <script src="/semantic.min.js"></script>
    <script src="/elm.js"></script>
    <script id="sample-data" type="application/json">
      {{sample}}
    </script>
    <body>
      <script>
      var app = Elm.Main.fullscreen({
        host: document.location.host,
        protocol: document.location.protocol,
        sample: document.getElementById("sample-data").innerHTML
      });
      </script>
    </body>
  </head>
</html>

elm:

type alias Flags =
    { host : String
    , protocol : String
    , sample : Maybe String
    }


init : Flags -> ( Model, Cmd Action )
init flags =
    ( { view =
            case flags.sample of
                Just string ->
                    SampleFleetViewModel <|
                        case Json.Decode.decodeString Codec.decodeFleetUpdates string of
                            Ok model ->
                                SampleFleetView.ActualModel model

                            Err error ->
                                SampleFleetView.Error error

                Nothing ->
                    EnterFleetUrlModel EnterFleetUrl.init
      , host = flags.host
      , protocol = flags.protocol
      }
    , Cmd.none
    )

Upvotes: 2

Related Questions