Connecting Stores

Last updated 5 months ago

Components refer to stores in order to use functions and properties from the store.

The component references a store with the connect keyword:

store Counter {
state count : Number = 0
fun setCount (count : Number) : Promise(Never, Void) {
next { count = count }
}
}
component Main {
connect Counter exposing { count, setCount }
fun render : Html {
<div
onClick={(event : Html.Event) : Void => { setCount(count + 1) }}
onContextMenu={(event : Html.Event) : Void => { setCount(0) }}>
<{ "Count: " + Number.toString(count) }>
</div>
}
}

When connecting a store, the component must use the exposing keyword to list the particular functions or properties it will use.