Redux itu hanya library kecil tapi ….

Redux dikenal sebagai library untuk mengelola state. Ada banyak sekali panduan, tutorial, maupun video tentang redux bahkan dokumentasi nya cukup bagus. Lalu kenapa saya membuat tulisan ini ? Alasannya sederhana, yaitu membantu teman-teman seperti saya yang mungkin belum klik dengan redux meskipun sudah membaca banyak tutorial tentang redux. Percayalah redux tidak sesulit itu.

Meskipun mungkin anda tidak akan akan menggunakan library ini, tapi ada banyak pelajaran yang kita dapat dari paradigma dan arsitektur library ini dan bisa di implementasikan di library atau framework lain.

Redux itu ibarat database di frontend

Redux itu ibarat database di sisi frontend. Sepertinya layaknya database kita bisa melakukan operasi database seperti query,filter,insert,delete. Jika anda dari background MVC ( Model View Controller ) redux mirip seperti Model dan Controller. Redux tidak menyebutnya database tapi store dan hanya ada satu store dalam satu aplikasi yang disebut Single Source of Truth

UI=f(data)

Redux terhubung dengan tampilan atau UI aplikasi, perubahan data di redux akan merubah UI secara otomatis. Jadi prinsipnya adalah :
“data berubah = UI berubah”

Redux sebagai tempat businness logic

Businnes logic seperti validasi, verifikasi, authorisasi, proses asynchronous dan lain-lain, pada implementasi banyak di tempatkan di dalam redux. Memang tidak wajib tergantung dari jenis aplikasinya.

Sampai disini mudah-mudahan penjelasan tentang gambaran penempatan redux pada real application sudah cukup jelas. Selanjutnya mari kita lihat redux dalam react.

React & Redux

Apapun library atau frameworknya setiap developer butuh 2 hal penting dalam aplikasinya yaitu menampilkan dan mengelola data. Redux tugasnya mengelola data, untuk urusan menampilkan data anda bebas memakai library apa saja.

Redux memang paling populer di dunia react, tapi sebenarnya redux bisa di padukan dengan library lain seperti vue,angular,bahkan sang legendaris jquery.

Ketika membuat aplikasi berbasis component seperti React, tantangan yang sering dihadapi adalah komunikasi antar komponen. Contoh sederhana seperti :

• bagaimana memberi tahu komponen B kalau komponen A sudah di klik ?
• bagaimana mengubah isi dari komponen table, jika ada perubahan pada komponen filter ?
• bagaimana berkomunikasi komponen dengan parent yang berbeda ?

Redux menawarkan solusi global state. Cara kerjanya sederhana, Daripada pusing-pusing mengelola state per komponen, state dari setiap komponen di pindahkan ke global state yang disebut store.

Store ini akan terhubung dengan komponen. Selanjutnya kita hanya perlu berurusan dengan storenya si redux. Redux yang akan mengurus komunikasi komponent dan perubahan UI.

sumber: https://css-tricks.com

Wait, State itu apa sih ?

Pengertian state memang tergantung konteks. Dalam dunia programing State di ibaratkan seperti memori dari aplikasi. Memori ini digunakan untuk menyimpan status dari aktifitas atau eksekusi dari aplikasi, seperti :

• Interaksi user seperti click,scroll dsb (event state )
• Status halaman aktif ( location state )
• Status user login/tidak ( session state)
• Fetching data dari server
• dan lain sebagainya

Dalam react komponen memiliki state. State membuat aplikasi menjadi lebih dinamis. Perubahan dalam setiap komponen umumnya dilakukan dengan mengubah statenya.

Kapan waktu yg tepat menggunakan redux pada react ?

Berdasarkan pengalaman saya, sebaiknya jangan buru-buru langsung belajar redux, di sarankan fokus pada react terlebih dahulu. Untuk komunikasi antar komponen gunakan teknik callback, refs,context, dan high-order component. Jika dirasa mengelola state dengan cara diatas sudah terlalu rumit kemungkinan besar anda butuh redux.

Bagaimana cara belajar Redux ?

Cara yang paling umum dan natural bagi kita para coder adalah dengan langsung membuka editor dan mencoba mengulik codenya, buka dokumentasinya, trial & error sampai ketemu aha moment.

Supaya lebih efektif berikut step by step yang di sarankan untuk belajar redux :

1. Functional Programming itu wajib. Setidaknya anda punya basic functional programming sebelum mencoba redux lebih jauh. Tidak perlu harus mendalam cukup dengan memahami pure function, map, filter, reduce, high-order function. Saya rasa itu sudah cukup untuk lanjut, anda bisa memperdalamnya di lain waktu.
2. Memahami mutable dan immutable state.
3. Mulailah mempelajari cara kerja dasar redux seperti reducer, action, dispatch. 3 hal yang pasti digunakan dalam redux. Bagian paling menantang dalam redux adalah reducer, pengetahuan functional programming akan sangat membantu disini.
4. Memahami cara kerja container component dan presentational component.
5. Memahami cara kerja middleware redux. Dengan middleware kita dapat membuat redux lebih powerfull contoh menambahkan log error, prosess async dan sebagainya.
6. Memahami cara kerja async pada redux. Untuk di awal sudah cukup menggunakan middleware redux-thunk. Setelah terbiasa anda bisa mengeksplor Saga, Observable, atau Redux Promise Middleware. Tentu dalam hal ini anda sudah punya basic async programming. Jika belum silahkan baca tulisan saya disini

Tertarik untuk belajar lebih dalam ?

Saat ini saya sedang mempersiapkan seri panduan implementasi react-redux berdasarkan step by step diatas. Jika anda tertarik untuk belajar lebih dalam silahkan isi form.

Jika anda sudah menguasai atau minimal sudah pernah belajar redux, mohon sarannya. Agar saya bisa membuat content yang lebih baik. Terimakasih, Salam Coder Indonesia