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
@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
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
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
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.
Popular in Questions
Other popular topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #hex









