Built with Nacara
Copyright © 2021- Elmish contributors.
)
================================================
FILE: docs/docs/basics.fsx
================================================
(**
---
layout: standard
title: Basics
---
**)
(*** hide ***)
// This block of code is omitted in the generated HTML documentation. Use
// it to define helpers that you do not want to show in the documentation.
#I "../../src/bin/Debug/netstandard2.0"
(**
This is a very basic example of an Elmish app - it simply prints the current state in the Console.
First, let's import our dependencies. In a real application, these imports will be in your project file and/or `paket.references`.
*)
#r "Fable.Elmish.dll"
(**
Let's define our `Model` and `Msg` types. `Model` will hold the current state and `Msg` will tell us the nature of the change that we need to apply to the current state.
*)
type Model =
{
Value : int
}
type Msg =
| Increment
| Decrement
(**
Now we define the `init` function that will produce initial state once the program starts running.
It can take any arguments, but we'll just use `unit`. We'll need the [`Cmd`](cmd.html) type, so we'll open Elmish for that:
*)
open Elmish
let init () =
{
Value = 0
}
, Cmd.ofMsg Increment
(**
Notice that we return a tuple. The first field of the tuple tells the program the initial state. The second field holds the command to issue an `Increment` message.
The `update` function will receive the change required by `Msg`, and the current state. It will produce a new state and potentially new command(s).
*)
let update msg model =
match msg with
| Increment when model.Value < 2 ->
{ model with
Value = model.Value + 1
}
, Cmd.ofMsg Increment
| Increment ->
{ model with
Value = model.Value + 1
}
, Cmd.ofMsg Decrement
| Decrement when model.Value > 1 ->
{ model with
Value = model.Value - 1
}
, Cmd.ofMsg Decrement
| Decrement ->
{ model with
Value = model.Value - 1
}
, Cmd.ofMsg Increment
(**
Again we return a tuple: new state, command.
If we execute this as Elmish program, it will keep updating the model from 0 to 3 and back, printing the current state to the console:
*)
Program.mkProgram init update (fun model _ -> printf "%A\n" model)
|> Program.run
================================================
FILE: docs/docs/menu.json
================================================
[
{
"type": "section",
"label": "Step by step",
"items": [
"docs/basics",
"docs/parent-child",
"docs/subscription",
"docs/subscriptionv3"
]
}
]
================================================
FILE: docs/docs/parent-child.fsx
================================================
(**
---
layout: standard
title: Parent-child composition
---
**)
(*** hide ***)
// This block of code is omitted in the generated HTML documentation. Use
// it to define helpers that you do not want to show in the documentation.
#I "../../src/bin/Debug/netstandard2.0"
#r "Fable.Elmish.dll"
(**
This is an example of nesting logic, where each child looks like an individual app.
It knows nothing about what contains it or how it's run, and that's a good thing, as it allows for great flexibility in how things are put together.
Let's define our `Counter` module to hold child logic:
*)
open Elmish
module Counter =
type Model =
{
count : int
}
let init() =
{
count = 0
}
, Cmd.none // no initial command
type Msg =
| Increment
| Decrement
let update msg model =
match msg with
| Increment ->
{ model with
count = model.count + 1
}
, Cmd.none
| Decrement ->
{ model with
count = model.count - 1
}
, Cmd.none
(**
Now we'll define types to hold two counters `top` and `bottom`, and message cases for each counter instance:
*)
type Model =
{
top : Counter.Model
bottom : Counter.Model
}
type Msg =
| Reset
| Top of Counter.Msg
| Bottom of Counter.Msg
(**
And our initialization logic, where we ask for two counters to be initialized:
*)
let init() =
let top, topCmd = Counter.init()
let bottom, bottomCmd = Counter.init()
{
top = top
bottom = bottom
}
, Cmd.batch [
Cmd.map Top topCmd
Cmd.map Bottom bottomCmd
]
(**
`Cmd.map` is used to "elevate" the Counter message into the container type, using corresponding `Top`/`Bottom` case constructors as the mapping function.
We batch the commands together to produce a single command for our entire container.
Note that even though we've implemented the counter as not issuing any commands,
in a real application we still may want to map the commands to facilitate encapsulation - if at any point the child does emit some messages, we'll be in a position to handle them correctly.
And finally our update function:
*)
let update msg model : Model * Cmd