Search⌘ K
AI Features
Home
Courses
Building Real-Time Web Applications with Phoenix LiveView

The Product Index (Part-II)

Explore how to manage and render product indexes in Phoenix LiveView. Learn to set initial state with mount/3, use Catalog functions to list products, and efficiently update UI with .leex templates that track state changes for partial re-renders.

We'll cover the following...

Now that we know what will happen after the route is matched, let’s trace through our code, line by line.

How to establish product index state

The job of the ProductLive.Index LiveView is to manage all actions that deal with lists of products. Regardless of the URL pattern, we match to get there, each path takes us first to the mount/3 function as explained in pento/lib/pento_web/live/product_live/index.ex like this:

Elixir
@impl true
def mount(_params, _session, socket) do
   {:ok, assign(socket,:products, list_products())} 
end

We already know that a LiveView revolves around its state. The mount/3 function sets up the initial state, in this case adding a list of products into the socket assigns. Here, it does so with the help of the list_products() function. Let’s take a look at the Product Index LiveView in pento/lib/pento_web/live/product_live/index.ex:

Elixir
defp list_products do
   Catalog.list_products()
end

The ...