Building Real-Time Web Applications with Phoenix LiveView/

...

/

The Product Index (Part-II)

The Product Index (Part-II)

Let's learn how state management is done using mount/render in Phoenix LiveView.

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:

Press + to interact
@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:

Press + to interact
defp list_products do
   Catalog.list_products()
end

The Catalog.list_products/0 ...