dakora
Communicating Between Live Components
Hello all!
I’ve been working a few days on trying to solve a relatively simple issue, however it’s turning into quite the road block. I have a Live Component. which is nested inside of a Form Component which I’ve used to replace a custom AJAX search box which was dreadful to use and consisted of 400 lines of javascript.
I’m having an issue attempting to reconstruct part of the functionality, which basically involves copying the value in short to a related sibling search box if it happens to be empty.
I’ve had little luck so far in getting the two Live Components to talk to each other without causing a mess.
The first idea i had was to use Phoenix PubSub, but discovered live components can’t have handle info, so that goes to the parent, which is fine. I decided to try the more direct route, and use send/2 which gets my message to the parent however it looks like the only option is send_update/2 to get anything to a child liveview.
That won’t work because calling update wipes out all of the existing assigns for the component, and there is no way to get the originals back to it (as its a different component thats requesting the update). Back to square one!
I’m not terribly familiar with send/2, however that could be another avenue to explore. I don’t really see anyway to let the requesting component know which process it needs to send to. I tried backtracking through the Live Component code for send_update, but it does a weird thing with the Phoenix Channel and it doesn’t look obvious how it actually triggers update on the correct component by ID.
What are the other options for communicating between Live Components? The less desirable I can think of would be to fire up full blown Live Views for every search box, but that seems too heavy for one input and some basic search functionality.
Most Liked Responses
sfusato
I usually have a simple public API for each component that needs to be talked to. Something like:
defmodule LiveComponentTwo do
######### Public API
def update_text(id, text) do
send_update(__MODULE__, id: id, update: :update_text, text: text)
end
#########
def update(%{update: :update_text, text: text}, socket) do
# I suppose here you could check if the value in the socket is empty
{:ok, assign(socket, :text, text)}
end
def update(assigns, socket) do
{:ok, assign(socket, assigns)}
end
end
then, LiveComponentTwo.update_text("id_of_the_component", "text")
Notice that I add a key update: :update_text and then pattern match on that key in the update callback.
sfusato
It’s cleaner this way, easier to refactor, it’s obvious that this component is called from outside just by opening the file.
benwilson512
This shouldn’t be true, are you using stateless or stateful components? To do the kind of communication you want you definitely need stateful live components, and in those cases update does not clobber existing assigns.
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Enabling companies to succeed by building software people love.
Categories:
Sub Categories:
Forums
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Real-time error tracking, performance insights, and observability for devs.
Practical resources that improve the lives of professional developers.
Producing high quality Elixir screencasts since 2017.
The deployment platform built for Elixir: PaaS ease, VPS control.
Courses that'll move you from confusion to "Aha, now I get it!"