Belajar Livewire - Actions & Wire Directives

#Pendahuluan

Setelah di episode 4 kalian menguasai wire:model untuk mengikat state, sekarang saatnya membuat UI melakukan sesuatu. Inilah peran actions: method di komponen PHP yang dipanggil dari view ketika user berinteraksi. Action adalah "tombol eksekusi" Livewire — tempat logika bisnis, query database, dan redirect hidup.

Di episode ini kita juga membahas beberapa directive pengendali render yang membuat Livewire fleksibel untuk kasus nyata: wire:key untuk list yang stabil, wire:ignore untuk elemen yang tidak boleh disentuh morphing, dan wire:poll untuk auto-refresh berkala.

#Actions: Method yang Dipanggil dari View

Action hanyalah method publik biasa di komponen. Yang membedakannya adalah cara ia dipanggil — lewat directive di Blade:

<?php
 
namespace App\Livewire;
 
use Livewire\Component;
 
class PostActions extends Component
{
    public bool $saved = false;
 
    public function save()
    {
        // logika bisnis...
        $this->saved = true;
    }
 
    public function resetForm()
    {
        $this->saved = false;
    }
}

<div>
    <button wire:click="save">Simpan</button>
    <button wire:click="resetForm">Reset</button>
</div>

wire:click="save" mengirim request ke server untuk menjalankan method save(). Setelah method selesai, Livewire otomatis merender ulang view — jadi perubahan state apa pun langsung terlihat.

#Directive untuk Memicu Action

#wire:click

Pemicu paling umum. Mendukung modifier untuk mengontrol perilaku konfirmasi dan waktu:

<button wire:click="save">Simpan</button>
<button wire:click="delete" wire:confirm="Yakin hapus?">Hapus</button>
<button wire:click.prevent="submit">Kirim</button>

• wire:confirm="..." memunculkan dialog konfirmasi native browser sebelum action dijalankan.
• .prevent mencegah perilaku default elemen (misalnya mencegah <a> berpindah halaman).

#wire:submit

Dipasang di form; dijalankan saat submit. Wajib untuk form yang mengandung wire:model agar state terkirim sebelum action dieksekusi:

<form wire:submit="save">
    <input type="text" wire:model="title" placeholder="Judul">
    <button type="submit">Simpan</button>
</form>

Saat tombol submit diklik, Livewire mengirim seluruh state deferred (dari wire:model) beserta perintah menjalankan save() dalam satu request. Inilah alasan mengapa di v4 wire:model default deferred tidak masalah: state tersinkron saat submit.

#wire:change

Dijalankan saat nilai elemen berubah (sinkron di sisi client):

<select wire:change="onFilterChange">
    <option value="all">Semua</option>
    <option value="published">Published</option>
</select>

Berguna untuk dropdown filter yang langsung memproses pilihan user tanpa tombol.

#Parameter di Action

Action bisa menerima parameter — dipakai untuk menargetkan data spesifik:

@foreach ($posts as $post)
    <button wire:click="edit({{ $post->id }})">Edit</button>
@endforeach

public function edit(int $postId)
{
    $this->postId = $postId;
    // muat data post...
}

Livewire juga mendukung named parameters (wire:click="edit(id: {{ $post->id }})") yang membuat kode lebih terbaca saat ada banyak argumen.

#Directive Pengendali Render

#wire:key — identitas elemen dalam list

Saat merender list dengan @foreach, setiap elemen harus punya wire:key unik. Tanpa ini, Livewire bisa salah me-morph elemen saat list berubah (misalnya saat item dihapus atau diurutkan):

<ul>
    @foreach ($posts as $post)
        <li wire:key="post-{{ $post->id }}">
            {{ $post->title }}
        </li>
    @endforeach
</ul>

Aturan sederhananya: setiap loop yang berada di dalam komponen Livewire dan bisa berubah, wajib diberi wire:key.

#wire:ignore — zona bebas morphing

wire:ignore memberi tahu Livewire untuk tidak menyentuh isi elemen saat morphing. Ini penting untuk area yang dikelola library JavaScript eksternal (misalnya editor teks kaya yang menyimpan state di DOM):

<div wire:ignore>
    <textarea id="rich-editor"></textarea>
</div>

Tanpa wire:ignore, Livewire bisa menimpa konten editor saat render ulang komponen. Kombinasi wire:ignore dengan library pihak ketiga kita bahas di episode 18.

#wire:poll — auto-refresh berkala

wire:poll membuat komponen melakukan polling (refresh otomatis) ke server secara berkala:

<div wire:poll.5s>
    <h1>Jumlah pesanan baru: {{ $orderCount }}</h1>
</div>

Tanpa interval, wire:poll default setiap 2 detik. Kita bahas lebih dalam bersama loading states di episode 16 — untuk sekarang cukup tahu: polling adalah cara sederhana membuat Livewire "hidup" tanpa WebSocket.

#Pitfall Umum

• Form tanpa wire:submit: submit biasa akan me-reload halaman penuh, dan state wire:model deferred bisa hilang. Selalu pasang wire:submit.
• Action dengan nama terlarang: beberapa nama method reserved oleh Livewire (misalnya mount, render, updated*). Hindari menamai action dengan pola tersebut.
• Lupa wire:key pada list: symptomnya kacau — input kehilangan fokus, animasi salah, atau data tampil terbalik. Diagnosa pertama selalu cek wire:key.
• Parameter tanpa tipe: wire:click="edit({{ $post->id }})" mengirim string; deklarasikan tipe int di signature method agar di-cast otomatis.

#Penutup

Inti yang harus dibawa pulang:

• Action = method publik; dipanggil lewat wire:click, wire:submit, wire:change.
• wire:submit wajib di form agar state deferred terkirim sebelum action berjalan.
• Action menerima parameter posisional maupun named (wire:click="edit(id: 5)").
• wire:key untuk list, wire:ignore untuk zona library eksternal, wire:poll untuk auto-refresh.
• Pitfall: form tanpa wire:submit, nama method reserved, dan list tanpa wire:key.

Di episode 6 selanjutnya kita akan membahas lifecycle hooks & computed properties — mount(), boot(), hydrate(), updating/updated($property), render(), serta #[Computed] untuk nilai turunan yang di-cache per request. Ini akan menjadi alat penting untuk mengatur kapan query dijalankan dan kapan di-cache. Sampai jumpa di episode 6!