Repaso: Eventos personalizados en Laravel Livewire del padre a hijo y viceversa

▶

Una de las complicaciones que yo veo con Livewire, es decir, un punto negativo si lo comparamos con Inertia o directamente con Laravel o la implementación en sí misma, es que la considero a veces muy abstracta y existen muchas formas de hacer lo mismo.

¿A qué me refiero con esto? Muchas veces queremos actualizar un componentes hermanos, componentes que no se pueden comunicar de manera directa pero, que la acción de uno debería hacer que el otro se actualice, pero, esta operación no es posible de manera directa, al no poder comunicar componentes hermanos.

Entonces, eso para mí es un problema porque, obviamente, la página no es consistente en base a lo que acabamos de hacer. Es decir, si le damos "agregar" la primera vez y recargamos la página, esto se presenta de una forma, y cuando recargamos (que es la forma que va a quedar), se presenta de otra forma en base a la lógica que implementamos. Y ese es el problema.

La Complejidad de la Solución y las Múltiples Opciones en Livewire

La solución, lamentablemente, no es tan sencilla, y es lo que yo digo que puede ser un poco abstracto todo lo que tenga que ver aquí con los componentes en Livewire. Ya que, pues nada, podría haber muchas formas de hacer lo mismo y puede que no quede tan claro qué es lo que tenemos que hacer: si recargar toda la página con JavaScript, si hacerlo mediante el Alpine, que también existen algunas formas, si comunicar de alguna manera el componente, si utilizar las keys para redibujar el componente o directamente la propiedad de la cual te voy a hablar. A lo que me refiero es que hay muchas formas de hacer lo mismo, y es bastante abstracto y complicado realmente de saber qué es lo que tenemos que hacer, que es un poco de lo que yo quiero hablar en las siguientes dos clases. Ya que, otra vez, esto es algo un poco trivial lo que queremos hacer, pero para llegar a ello realmente, al menos a mí, me cuesta un poquito.

Propiedad "Refresh"

Entonces, ¿qué es lo que quiero hablar sobre refresh? Ya aclarado un poco eso, ya que a lo que queremos llegar es a recargar ese componente, para ello, tenemos una propiedad refresh en Laravel Livewire según hablamos anteriormente. La idea es que, al suceder los cambios en alguno e los componentes hermanos, notifiquemos al componente padre y este, actualice su estado mediante la propiedad refresh:

class General extends Component
{
  ***
   protected $listeners = ['stepEvent'];
   
   
class Person extends Component
{
   ***
   function submit()
   {
       ***
       $this->dispatch('stepEvent', 3);
   }

Alternativas y la Comunicación entre Componentes

Una forma de recargar un componente y con esto, sus hijos, es con la propiedad refresh, otra forma, es la de emplear la key:

class Show extends Component
{
    ***
    public $key = 5;

    #[On('refreshComponent')]
    function refreshComponent()
    {
        $this->key = date('Y-m-d H:i:s');
        ***
    }
}

<div class="mycard-primary mb-5 block max-w-96">
   <div class="mycard-body">
       <h3 class="text-center text-3xl mb-4">Add this item</h3>
       @livewire('shop.cart', key($key), ['post' => $post, 'type' => 'add'])
   </div>
</div>

En la cual, fuerza el redibujo de los componentes hijos.

Conclusión

Entonces, ya para ir cerrando, como te digo, el problema es que en ambos casos el componente y los componentes son hermanos, las operaciones de uno al otro son independientes entre si. Entonces, podemos comunicarlo mediante eventos, eventos que pueden suceder del hijo al padre, como el mostrado anteriormente y viceversa.