[Liveview] LiveviewとLiveComponent間の状態管理

LiveviewとLivecmponent間の状態管理の理解があやふやだったので、覚書として簡単にまとめました。

主にsocketのassignsを更新する方法についてです。

Liveview自身の状態更新

Liveview自身の状態の更新の場合はassign/2 or assign/3を使ってシンプルに更新できます。

  assign(socket, hoge: "new_hoge")

参考文献：

LiveComponentからLiveviewへの状態更新

LiveviewとLiveComponentは同じプロセス内にいるため、LiveComponent側からLiveview(つまりselfへ)メッセージを送信し、Liveview側でhandle_info/2を用いて受信することで状態を更新できます。

  # from LiveComponent
  send self(), {:msg, %{hoge: "new_hoge"}}

  # in the Liveview
  def handle_info({:msg, hoge}, socket) do
    {:noreply, assign(socket, hoge)}
  end

参考文献： 下記リンクのManaging Stateより

LiveviewからLiveComponentへの状態更新

LiveviewはLiveComponentの親であるため、send_update/3を用いてLiveComponentの状態更新ができます。

  send_update(Hoge, id: "hoge", hoge: "new_hoge")

参考文献：

LiveComponent自身の状態更新

Liveview自身の状態更新の時と基本的に同じ手順ですが、一点異なるのはテンプレートでphx-clickイベントを設定するときにphx-target={@myself}も一緒に書くという点です。
phx-target={@myself』を付けないとイベントがliveviewの方に送られてしまうので、LiveComponent自身にイベントが送られるようにするためです。

  # in the Heex templete
  <button phx-click="update_hoge" phx-target={@myself} >Update Hoge</button>

  # in the LiveComponent 
  def handle_event("update_hoge", ...

参考文献：下記リンクの Targeting Component Eventsより