i-n-g-m-a-r

i-n-g-m-a-r

Nested LiveComponents: how to send message to "parent" via "top"?

I am experimenting with nested LiveComponents inside a LiveView.
My basic idea is to have a LiveView that contains:

  • header: navigation LiveComponent
  • main: “current” LiveComponent depending on assigns.live_action

Now I have a stateful “current” LiveComponent that contains multiple stateful child LiveComponents.
Each child LiveComponent implements one of multiple steps and knows when it’s “done”.
When a step is completed I would like to notify the parent (the stateful “current” LiveComponent).
Messages to self() are (of course) not received by parent but rather by “top” (the LiveView).

How can I have the LiveView (“top”) pass down messages to the “current” LiveComponent (parent) without having to tightly couple the LiveView to it’s child LiveComponents?

Marked As Solved

benwilson512

benwilson512

Author of Craft GraphQL APIs in Elixir with Absinthe

@i-n-g-m-a-r if you have the parent live view pass down its id to the child, the child can include that id in the message sent to self, and then the top live view can route the message to the correct live view via Phoenix.LiveView — Phoenix LiveView v1.2.5

Also Liked

Ninigi

Ninigi

From what I have learned by working with Phoenix LiveView by now is that you do not want deeply nested live-views. One Route LiveView to take care of params, two more layers is ok, but it becomes extremely hard to follow if there are more layers.

I think I have still not 100% figured out what components are supposed to be used with, but I can tell you that usually nesting components is a problem.
We are using components to preload more efficiently, and to take care of events, but every parent using the component has to subscribe to a higher level event… Lets just say, we have not figured it out yet.

If you have a lot of LVs, let them communicate via Phoenix Pub. Elixir is extremely good in handling different processes, as long as they communicate with each other - I actually started always returning {:noreply, socket} in handle_event/2 and let my handle_info/2 handle it, as long as I know that there is an event triggered. And LiveView diff has become so good and fast… Honestly, I have no idea how they do it, but you can literally just send thousands of updates in 5 seconds, and your user does not even see anything.

Let me know what your current set-up looks like, LiveView is still a very new technology, and I want to hear other people’s thoughts on how to do it!

Ninigi

Ninigi

Yes, same here. I think it really helps to remember that components are in the same process. Nested components are communicating with a parent (always the parent liveview), so at what point should all the components have their own liveview?
Component events in our current model usually trigger a global event, which the parent should subscribe to anyways, and not change their own state at all, because the parent will take care.

I don’t know how you guys are using LV and components, but I would like to learn!

Last Post!

Ninigi

Ninigi

How do you deal with possible component id duplicates?

Like in our case, you have an order with order items, order items would show up in waiting for shipment and ready to ship but with different conditionals, in the same liveview.

Where Next?

Popular in Questions Top

Qqwy
Original source of discussion: This topic on the Pragmatic Programmers’ Functional Web Development with Elixir, OTP, and Phoenix forum. ...
New
gshaw
What is the idiomatic way of matching for not nil in Elixir? E.g., First way: defp halt_if_not_signed_in(conn, signed_in_account) when...
New
komlanvi
Hi everyone, I was playing with phoenix liveView but I run into an issue. I have a form and want to validate each input text when the te...
New
shijith.k
I am trying to start a new phoenix project with elixir 1.9, but mix phx.new does not work. It says that ** (Mix) The task "phx.new" could...
New
freewebwithme
Using vs code and installed ElixirLS: support and debugger. And I got an error popped up on start up says Failed to run ‘elixir’ comma...
New
marius95
Hello everyone, I try to use an Javascript Event Handler in my root.html.leex file. Therefore I created a function in the app.js file: ...
New
senggen
Erlang/OTP 25 [erts-13.2.2] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] 15:22:35.803 [error] gen_event {lager_file_backend...
New

Other popular topics Top

baxterw3b
Hi guys, i’m new in the Elixir world, and i have to say, that i love it! i’m having some problem to understand anonymous functions with ...
New
Qqwy
Original source of discussion: This topic on the Pragmatic Programmers’ Functional Web Development with Elixir, OTP, and Phoenix forum. ...
New
openscript
Hello! Sorry for this astonishing simple question, but I’m really stuck. I try to set up the intellij-elixir plugin, but I don’t know ho...
New
ashish173
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
sen
Hi All, I set a environment variables in dev.exs , like below code. when i start server, how can i set the ${enable} value? thanks. d...
New
saif
Hello everyone, Long time lurker first time poster here. I’ve recently begun working on Elixir full-time again! :raised_hands: It’s been...
New

We're in Beta

About us Mission Statement