Memahami Cara Kerja Reducers Pada Redux

Dalam artikel sebelumnya saya sudah memperkenalkan Redux, kali ini kita membahas lebih detail fitur-fitur dalam Redux. Secara garis besar Redux terdiri dari 2 bagian yakni Reducers dan Actions. Reducers adalah tempat mengeksekusi perintah untuk memanipulasi state (JSON) seperti crud, mengelola keranjang belanja dan lain-lain. Sedangkan Actions adalah tempat untuk menampung aksi yang berasal dari view (React Components).

Reducers adalah berupa function-function yang di dalamnya terdapat struktur logika (biasanya menggunakan switch case) yang berfungsi untuk menentukan apa yang akan dieksekusi berdasarkan aksi yang dikirim melalui Actions. Gambaran sederhananya seperti ini:

Jika aksinya adalah "Add Todo"
> Maka lakukan eksekusi untuk menambah data todo
Jika aksinya adalah "Delete Todo"
> Maka lakukan eksekusi untuk menghapus data todo

Berikut adalah contoh lengkap sebuah Reducers.

Fungsi dari Reducers adalah memanage state (parameter ke-1), state adalah sebuah variabel yang berisi data berbentuk JSON. Jadi setiap setelah melakukan eksekusi, kita wajib mengembalikan state (return state) ke view. action (parameter ke-2) adalah variabel yang berisi action type dan data-data yang dipassing dari view.

Contoh kita akan menghapus todo, maka kita wajib membuat action type 'DELETE_TODO' sesuai dengan yang ditentukan pada Reducers.

Atau menambah todo, maka kita wajib membuat action type 'ADD_TODO' sesuai dengan yang ditentukan pada Reducers.

Cara Menggunakan Reducers (Redux) pada Project React

Untuk menggunakan Redux pada project React, kita harus menginstal package yakni redux dan react-redux, dan beberapa package loader nya seperti babel-loader, babel-preset-react, babel-preset-es2015 dan babel-plugin-transform-decorators-legacy.

Config Webpack.

Pastikan teman-teman sudah menginstal package react, react-dom, webpack dan webpack-dev-server. Berikut adalah konfigurasi webpack pada file webpack.config.js.

Berikut adalah folder project yang saya buat.

Karena ini hanya sebuah contoh, jadi saya akan membuat reducers dan component react dalam satu dokumen bernama app.js.

Jalankan hasilnya pada browser http://localhost:1111/

Klik tombol Add, maka akan tampil "Menambah item todo!!", dan Klik tombol Delete, maka akan tampil "Menghapus item todo!!".

Ket: Pada contoh di atas kita hanya memastikan bahwa Reducers berjalan dengan baik, pada tutorial berikutnya kita akan membuat "real" Todos App menggunakan React dan Redux.

3 Desember 2016

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat