I have a page with a large state that is loaded from DB, let’s call that “data”.
I have a root live view that load “data” on mount and render different live components (one component per tab).
This is to allow switching tab without hitting the DB.
Now, my issue was that each component is really isolated for the state (like selection), and I wanted to be able to do something like send(self(), {:select_part, part})
and do the handle_info
in the component rendering the current tab, and now the “root live view”.
I found a neat solution I want to share as it might be a common issue.
In the deep down component, instead of doing send()
do send_update(DrawTabComponent, id: "draw_tab", action: {:select_part, part})
.
Then in the DrawTabComponent
implement update like:
@impl true
def update(%{action: {:select_part, part}}, socket) do
{:ok, assign(socket, selected_part: part)}
end
@impl true
def update(regular_assigns, socket) do
{:ok, assign(socket, regular_assigns)}
end
This allow for the same organization/code split as nested live view. Each update(%{action
implementation is similar to a handle_info
, without overriding the regular update, thus allowing a similar decoupling as live view mount/handle_params
and handle_info