Memahami Actions di Livewire 4

Jika sebelumnya kita membahas properties sebagai tempat menyimpan state, maka sekarang kita masuk ke bagian yang tidak kalah penting, yaitu actions.

Secara sederhana, actions adalah method pada komponen Livewire yang dipicu oleh interaksi pengguna—misalnya klik tombol, submit form, atau menekan tombol keyboard tertentu.

Keunggulan utama Livewire di sini adalah pengalaman developer yang sangat nyaman: kita bisa memanggil method PHP langsung dari browser, tanpa perlu menulis AJAX, fetch, atau JavaScript yang bertele-tele.

Contoh Dasar: Action save()

Mari mulai dari contoh paling umum: menyimpan data dari form.

new class extends Component {
    public $title = '';
    public $content = '';

    public function save()
    {
        Post::create([
            'title' => $this->title,
            'content' => $this->content,
        ]);

        return redirect()->to('/posts');
    }
};
<form wire:submit="save">
    <input type="text" wire:model="title">
    <textarea wire:model="content"></textarea>
    <button type="submit">Save</button>
</form>

Saat tombol Save ditekan, wire:submit akan mencegat submit form dan memanggil method save() di server.

Tanpa AJAX, tanpa controller tambahan—langsung PHP.

Inilah esensi Livewire: interaksi frontend → logic backend, dengan cara yang sangat natural.

Mengirim Parameter ke Action

Dalam praktik nyata, action sering membutuhkan data tambahan. Livewire memungkinkan kita mengirim parameter langsung dari Blade ke method action.

Contoh klasik: menghapus post.

public function delete($id)
{
    $post = Post::findOrFail($id);

    $this->authorize('delete', $post);

    $post->delete();
}
<button wire:click="delete({{ $post->id }})">Delete</button>

Jika tombol ini diklik, Livewire akan memanggil delete(2) misalnya, dan nilai 2 diterima sebagai $id.

Catatan penting: Parameter action harus diperlakukan seperti input request HTTP. Artinya: tidak boleh dipercaya begitu saja.

Route Model Binding di Action

Agar lebih rapi dan aman, Livewire mendukung route model binding versi action.

public function delete(Post $post)
{
    $this->authorize('delete', $post);
    $post->delete();
}

Sekarang, Livewire akan otomatis mengambil model Post berdasarkan ID yang dikirim dari frontend. Kode lebih singkat dan lebih aman.

Dependency Injection di Action

Action juga mendukung dependency injection Laravel.

public function delete(PostRepository $posts, $postId)
{
    $posts->deletePost($postId);
}

Livewire akan menyuntikkan PostRepository dari service container sebelum menerima parameter lainnya. Cocok untuk arsitektur yang lebih rapi dan terstruktur.

Event Listener di Livewire

Livewire menyediakan banyak event listener berbasis wire::

• wire:click
• wire:submit
• wire:keydown
• wire:keyup
• wire:mouseenter
• bahkan wire:anything

Karena di balik layar Livewire menggunakan Alpine, semua event browser didukung.

Contoh:

<input wire:keydown.enter="searchPosts">

Artinya, method searchPosts() akan dipanggil saat user menekan Enter.

Modifier Keyboard

Livewire menyediakan shortcut modifier untuk kombinasi tombol:

<input wire:keydown.shift.enter="submit">

Beberapa modifier umum:

• .enter
• .shift
• .ctrl
• .alt
• .escape
• .tab
• .up, .down, .left, .right

Ini sangat membantu untuk UX yang lebih natural.

Event Modifier (Prevent, Stop, dll)

Livewire juga menyediakan modifier event:

<input wire:keydown.prevent="...">

Beberapa modifier penting:

• .prevent → preventDefault
• .stop → stopPropagation
• .once → hanya sekali
• .debounce.300ms
• .throttle
• .window
• .outside

Semua ini berasal dari Alpine dan otomatis tersedia di Livewire.

Menangani Event dari Library Pihak Ketiga

Livewire bisa menangkap event custom, misalnya dari Trix Editor:

<trix-editor
    wire:trix-change="setPostContent($event.target.value)">
</trix-editor>

Namun perlu diingat: event seperti ini bisa memicu request di setiap ketikan.

Solusi yang lebih efisien:

<trix-editor
   x-on:trix-change="$wire.content = $event.target.value">
</trix-editor>

Menonaktifkan Input Saat Submit

Secara default, Livewire menonaktifkan semua input dan tombol submit saat wire:submit sedang diproses. Ini mencegah submit ganda.

Untuk menampilkan indikator loading:

<span wire:loading>Saving...</span>

Atau versi yang lebih fleksibel dengan Tailwind:

<button class="data-loading:opacity-50">Save</button>
<span class="not-data-loading:hidden">Saving...</span>

Refresh Komponen dengan $refresh

Jika ingin me-render ulang komponen tanpa memanggil method:

<button wire:click="$refresh">Refresh</button>

Livewire akan melakukan request ulang dan memperbarui tampilan.

Konfirmasi Aksi Berbahaya

Livewire 4 menyediakan wire:confirm:

<button
    wire:click="delete"
    wire:c>
    Delete
</button>

Tanpa JavaScript tambahan, dialog konfirmasi langsung muncul.

Memanggil Action dari Alpine

Karena Livewire dan Alpine menyatu, kita bisa memanggil action lewat $wire:

<button x-on:click="$wire.save()">Save</button>

Bahkan untuk kasus lanjutan:

<div x-intersect="$wire.incrementViewCount()"></div>

Action Mengembalikan Nilai (Promise)

Action yang dipanggil lewat $wire akan mengembalikan Promise.

public function getPostCount()
{
    return Post::count();
}
<span x-init="$el.innerHTML = await $wire.getPostCount()"></span>

Untuk action yang dikonsumsi JavaScript, gunakan #[Json] agar lebih optimal.

JavaScript Actions (Client-side Only)

Livewire 4 memperkenalkan JavaScript actions melalui $js.

Contoh optimistik update bookmark:

1. UI langsung berubah
2. Data disimpan di server belakangan

Ini membuat aplikasi terasa instan dan responsif.

Magic Actions di Livewire

Livewire menyediakan beberapa action bawaan:

• $set → set property
• $toggle → toggle boolean
• $refresh → render ulang
• $dispatch → kirim event
• $parent → panggil action parent
• $event → akses event JS

Contoh:

<button wire:click="$toggle('sortAsc')">Toggle</button>

Renderless Action

Jika action tidak memengaruhi tampilan, kita bisa mencegah render ulang.

#[Renderless]
public function incrementViewCount()
{
    $this->post->incrementViewCount();
}

Atau secara manual:

$this->skipRender();

Async Actions: Eksekusi Paralel

Secara default, Livewire menjalankan action secara berurutan. Namun dengan #[Async] atau .async, action bisa berjalan paralel.

<button wire:click.async="logActivity">Track</button>

Cocok untuk:

• logging
• analytics
• fire-and-forget task

Jangan gunakan async untuk mengubah state UI Karena bisa menyebabkan race condition.

Keamanan: Ini Bagian yang Sangat Penting

Beberapa prinsip wajib:

1. Selalu authorize parameter action
2. Selalu authorize di server
3. Jangan biarkan method sensitif public

Jika sebuah method tidak dimaksudkan dipanggil dari client, buat protected atau private.

protected function delete($id)
{
    // aman
}

Ingat: Semua public method bisa dipanggil dari DevTools.

Penutup

Actions di Livewire 4 adalah jembatan utama antara interaksi pengguna dan logika aplikasi. Jika dipahami dengan benar, kita bisa membangun aplikasi yang:

• interaktif
• aman
• bersih secara arsitektur
• minim JavaScript.