Halogen Hooks

嬉しさはReact Hooksの嬉しさとだいたい同じ

ただ、従来のHalogen Componentが難しすぎるのでReactよりも嬉しさが増す

個々のComponent内の状態やロジックの再利用が簡単にでき、

Component自体の定義の仕方も楽になる

React Hooksを知っているとかなりスムーズに導入できる

ReactHooksを知らないと少し難しいかもしれないが、それでも従来のHalogen Componentよりは学習コストめっちゃ低い

公式が作っているのに、公式があまり推していないのが謎

簡単な使用例

最初に読むと良い

解説と実装がある

便利hooks集

型で、内部で使用するhookの型を列挙する

code:purs(hs)

import Halogen.Hooks (type (<>), UseEffect, UseState)

type UseWindowWidth = UseState (Maybe Int) <> UseEffect <> Hooks.Pure

hook自体の型

code:purs(hs)

useWindowWidth :: ∀ m

. MonadAff m

=> Hook m UseWindowWidth (Maybe Int)

内部で使用するhookの型と

返り値の型

などを指定する

react hooksと同様で、呼び出す順序は毎回同じでないといけない

違うところは、順序が異なるような書き方をした場合、Halogen hooksでは「コンパイルエラー」が得られる

直接的にはhookと関係ないが

通常はHalogenMで書くものを、hooks内ではHookMで書く

HalgeonM内でできることは何でもできる

code:purs(hs)

useToggle :: ∀ m. Hook m UseToggle (Tuple Boolean (HookM _ Unit))

useToggle = Hooks.wrap hook

where

hook :: Hook m UseToggle' _

hook = Hooks.do

flg /\ flgId <- Hooks.useState false

let

update :: HookM _ Unit

update = Hooks.modify_ flgId not

Hooks.pure $ flg /\ update

利用時も

code:purs(hs)

flg /\ setFlg <- useToggle