LiveView flash assigns not available in child LiveComponent

I have a LiveView that renders a LiveComponent via an leex template:

defmodule MyAppWeb.ThingEditView do
  use Phoenix.LiveView

  def mount(_params, _session, socket) do
    {:ok, socket}
  end

  def render(assigns) do
    MyLiveView.render("edit.html", assigns)
  end

  def handle_info({:update_thing, thing, thing_params}, socket) do
    case Thing.update_thing(thing, thing_params) do
      {:ok, thing} ->
        {:noreply,
         socket
         |> put_flash(:info, "Thing updated successfully.")
         |> push_redirect(to: Routes.live_path(socket, MyAppWeb.ThingEditView, thing))}

      {:error, %Ecto.Changeset{} = changeset} ->
        {:noreply, assign(socket, changeset: changeset)}
    end
  end
end

The template renders the LiveComponent like:

<%= live_component(@socket, MyAppWeb.MyLiveComponent) %>

When ThingEditView is rendered after the push_redirect above, I can see the flash message in MyAppWeb.ThingEditView's socket.assigns.flash. I would then expect by passing socket into MyLiveComponent I would be able to pull out the flash message in the LiveComponent via live_flash(@flash, :info).

However, socket.assigns.flash is always an empty map when my LiveComponent is rendered. I never call live_flash/2 in the LiveView and would expect the flash message to remain in the socket assigns until I pull it out in my LiveComponent.

Is this the correct way to be thinking about flash with LiveView? Am I missing something that would enable to behavior I’m after?

My understanding is that the combo put_flash + plug :fetch_live_flash is a convenience that will make the flash messages available in your main live view under the assign flash. In order to have it available in other liveviews/components rendered in your main liveview, you would have to pass it further along as an assign.

<%= live_component(@socket, MyAppWeb.MyLiveComponent, flash: @flash) %>
5 Likes

Explicitly passing @flash down through the child components does get the behavior I’m after. However, there are many layers of nested LiveComponents in my actual app and I was hoping to avoid passing flash through all of them and instead pluck it out of the socket in the specific child component that needs it.

Passing flash down as assigns is the way to go. Note, that you may want to pass it down as @parent_flash or similar as the nested components may have their own flash to display which you don’t necessary want to display on the parent.

2 Likes

Thanks Chris!

I was thinking about flash in more request/response lifecycle. But it sounds like every LiveView/LiveComponent will have its own flash, which would make sense. Just so I’m clear, does this mean that put_flash/2 will only set @flash for the LiveView it’s called from and not the socket in general?

1 Like

This is correct. The only nuance is put_flash + redirect from a nested LV or component will be picked up by the root LV.

1 Like