大家好，今天又只剩下 45 分鐘 x) 但我決定不水太多，來一起加深一下對 halogen 的理解。

打開 /src/Button.purs，我們可以看到大部份 logic 都在這裡：

module App.Button where

import Prelude
import Halogen as H
import Halogen.HTML as HH
import Halogen.HTML.Events as HE

type State
  = { count :: Int }

data Action
  = Increment

component :: forall q i o m. H.Component q i o m
component =
  H.mkComponent
    { initialState: \_ -> { count: 0 }
    , render
    , eval: H.mkEval H.defaultEval { handleAction = handleAction }
    }

render :: forall cs m. State -> H.ComponentHTML Action cs m
render state =
  HH.div_
    [ HH.p_
        [ HH.text $ "You clicked " <> show state.count <> " times" ]
    , HH.button
        [ HE.onClick \_ -> Increment ]
        [ HH.text "Click me" ]
    ]

handleAction :: forall cs o m. Action → H.HalogenM State Action cs o m Unit
handleAction = case _ of
  Increment -> H.modify_ \st -> st { count = st.count + 1 }

可以看到主要定義在 component 這個 function 裡面，但這裡有一個重大問題⋯ 注意 component 的 type:

component :: forall q i o m. H.Component q i o m

H.Component 這個 type... 他接收四個 type parameters， 而且一點 constraint 都沒有！看一下 Component 的 API:

The "public" type for a component, with details of the component internals existentially hidden.

query is the query algebra; the requests that can be made of the component
input is the input value that will be received when the parent of this component renders
output is the type of messages the component can raise
m is the effect monad used during evaluation

query algebra 是什麼？謝謝，完全看不懂 ( ；∀；)

到這裡我們需要比較有系統地學習 halogen，所以接下來的幾天，我們會嘗試先讀完 Halogen Guide。

如是者，又水了一天。今天應該是最水的。