jearbear

jearbear

Patterns for refreshing live component state in response to events?

I have forms in my app modeled using LiveComponents (they’re in modals) that mostly manage their own state. The following is an example of one:

    <.live_component
      module={TransactionForm}
      id="..."
      transaction={...}
      open={@live_action in [:create, :edit]}
      on_success={&push_patch(...)}
      on_cancel={JS.patch(...)}
    />

The live component will fetch data in the mount callback that’s required for things like select inputs (e.g. list of merchants, accounts, etc.).

I haven’t really figured out a good pattern to handle refreshing of data managed by live components. For example, if I have another form in the live view that creates a new merchant, I would want the other forms in the page to refresh their state to reflect the new merchant. It’s easy to do this at the live view level using Phoenix PubSub. I can emit an event when the change is triggered and refresh the live view’s state in a handle_info callback.

Since live components don’t have this capability, I’ve identified a few alternatives:

  1. Manage all this state at the live view level. I tried this but it makes the component really hard to work with since it ends up requiring each live view to load a bunch of state just to pass through to the live component. To me it kind of defeats the point of the live component in the first place.

  2. Load data in update callback instead of on mount. This will ensure that the live component will always have the latest data since it will just refetch it every time it opens / closes. The downside is that most of the time the refetching was not needed.

  3. Use send_update as a mechanism to send an event to the live component to tell it to reload state. I don’t like the idea of the caller literally settings assigns that it shouldn’t otherwise know about, but I did consider exposing a function from the live component module that could be called in the live view’s handle_info callback. It’s a little manual, but probably would work? An example:

defmodule TransactionForm do
  def refresh_data(id) do
    merchants = ...
    send_update(pid, id, merchants: ...)
  end
end

If live components could handle their own events I think that would solve the problem for me, but I understand the limitations of that given they share the process with the parent live view. Very interested in hearing how others are addressing this problem!

Most Liked

jearbear

jearbear

Makes sense! I ended up going with a hook that’s defined in the live component as to avoid leaking implementation details about internal state.

  def attach_refresh_hooks(socket, id) do
    attach_hook(socket, :refresh_transaction_form_data, :handle_info, fn _, socket ->
      send_update(__MODULE__, id: id, _refresh: true)
      {:cont, socket}
    end)
  end

Which gets called in the mount callback of live views that use it.

Where Next?

Popular in Questions Top

Harrisonl
We have an ECS cluster with 4 services, where each task joins a single cluster, via discovery ECS discovery service. Currently when I de...
New
Kurisu
For example for a current url like http://localhost:4000/cosmetic/products?_utf8=✓&amp;query=perfume&amp;page=2, I would like to get: ...
New
Fl4m3Ph03n1x
About me? ( if you have nothing better to do than reading about some random guy in the internet :stuck_out_tongue: ) Hello all, this is ...
New
fireproofsocks
Forgive me if this is obvious, but how does one delete a database record WITHOUT selecting it first? Ecto.Repo — Ecto v3.14.0 has exampl...
New
jerry
Good day to you all. I have been struggling to get a query involving like and ilike to work. Can anyone assist me on this, please? pro...
New
aalberti333
As the title describes, I’m trying to run Enum.map() over a list of key/value pairs, where the value is a map. My data looks like this: ...
New
sergio_101
I am VERY much an elixir newbie. I have taken one elixir course and one phoenix course on Udemy. During that course, I saw the instructor...
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
jononomo
For some reason my phoenix channels are working for me in my local dev environment, but as soon as I deploy via Docker, I get a 403 error...
New
dokuzbir
I want to highlight html closing tags when i click a html tag. That works in .html files but doesnt work for html.eex templates. How can...
New

Other popular topics Top

danschultzer
None of the current solutions worked well for me, so I went ahead and built a user management system from scratch. This project took far...
548 29603 241
New
hariharasudhan94
lets say i have a sample like a = 20; b = 10; if (a &gt; b) do {:ok, "a"} end if (a &lt; b) do {:ok, b} end if (a == b) do {:ok, "equa...
New
sorentwo
Hello! tl;dr Announcing Oban, an Ecto based job processing library with a focus on reliability and historical observability. After spen...
985 43487 311
New
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
johnnyicon
Hi all, I’ve just started learning Elixir and Phoenix Framework, so please pardon my n00bness at this stage. I’m trying to use Postgres...
New
AngeloChecked
What learn first? Rust or Elixir Hi Elixir community! I’m here because i want learn a new language. I’m a junior developer and mainly i ...
New
joeerl
Hello again - after a longish gap I’ve decided I really must dig into Elixir and see what’s been happening here - so I have a few questio...
New
alice
Hey, Just curious what are the main benefits of Elixir compared to Clojure? When is Elixir more useful than Clojure and vice versa? Th...
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
dokuzbir
I want to highlight html closing tags when i click a html tag. That works in .html files but doesnt work for html.eex templates. How can...
New

Latest on Elixir Forum

We're in Beta

About us Mission Statement