React Developer

PROA

Professional Academy

React Redux

Agenda

Apa saja yang akan dibahas?

  • Revisiting Reducer
  • Redux - What Is?
  • Redux Toolkit - What Is?
  • Redux Toolkit - How to?
  • QnA

Revisiting Reducer

Mari kita coba ingat ingat lagi yah tentang penggunaan Hooks yang ada hubungannya dengan materi hari ini: useReducer

Yuk kita coba dengan membuat contoh yang cukup sederhana tentang reducer: Membuat counter angka

Revisiting Reducer - Demo

Dalam project yang didemokan ini kita akan menggunakan paket lengkap yah (React + MUI + Router + useReducer + Redux... lainnya nanti)

  1. Membuat Project CRA baru dengan nama belajar-counter-redux dengan npx create-react-app belajar-counter-redux
  2. Masuk ke dalam project tersebut, dan lakukan instalasi React MUI dengan npm install @mui/material @emotion/react @emotion/styled
  3. Membuat component Navbar dulu pada file src/components/NavBar.jsx
  4. Membuat reducers-nya terlebih dahulu pada file src/reducers/counterReducer.js
  5. Membuat containers CounterReducerContainer pada file src/containers/CounterReducerContainer.jsx
  6. Memodifikasi file App.js untuk memuat component NavBar dan container CounterReducerContainer

Mulai pusing bukan? tenang, source code dari kode yang ditulis di atas bisa dibaca pada link di sini yah

Revisiting Reducer - Conclusion

Jadi apa yang kita dapat setelah menggunakan hooks useReducer ini?

  • Apabila kita ingin menambahkan reducer yang baru, kita harus import semuanya satu per satu (Ke dalam container / component yang dibuat)
  • Sampai sekarang ini, reducer yang kita gunakan, masih hanya bisa menggunakan state awal non side effect (tidak bisa menggunakan state dari data fetching)

Wah terdengar cukup menyeramkan yah masalah di atas, lalu solusinya bagaimana donk?

Salah satu solusinya adalah dengan menggunakan Library tambahan bernama Redux

Redux - What Is?

Mengutip dari dokumentasi Redux yang bisa dibaca di sini, Redux adalah:

  • Predictable state container untuk aplikasi JavaScript
  • Digunakan untuk menuliskan aplikasi yang bertindak secara konsisten
  • Cara penulisan dan penggunaan state yang Global dan Tersentralisasi

Kata kunci utamanya adalah:

  • Tidak semua project (berbasis React) membutuhkan Redux
  • Kita mungkin membutuhkan Redux apabila tidak mau menggunakan Props Drilling

Anggap saja ini seperti State, hanya saja bisa diakses dari manapun !

Redux - Why?

Sampai di titik perkenalan ini mungkin akan ada pertanyaan: Kenapa Redux?

Padahal kan sudah ada useContext dan/atau useReducer?

Jawabannya adalah ...

  • Belum ada fitur dari React secara native yang mengkombinasikan semua Reducer jadi ada di satu tempat saja (Tidak ada cara untuk menggabungkan seluruh reducer di satu tempat saja)
  • Setiap useReducer pada akhirnya akan memiliki fungsi Dispatch-nya sendiri ! (lagi-lagi) tidak ada fungsi yang bisa menggabungkan seluruh Dispatch-nya jadi satu.
  • (Tingkat lanjut) Tidak ada middleware pada useReducer
  • (Tingkat lanjut) Tidak ada middleware yang bisa menggunakan side effect dengan useReducer. Bisa, tapi harus menggabungkan tiga hooks (useReducer, useContext, dan useEffect jadi satu), sehingga kode yang dibuat menjadi terlalu sulit untuk dimaintain

Redux - When?

Jadi kapan donk khaque kita akan menggunakan redux ini?

Rules of Thumb-nya adalah sebagai berikut:

  • Gunakan useState untuk aplikasi yang simple / small size apps
  • Gunakan useState + useReducer + useContext untuk aplikasi yang advanced / medium size apps
  • Gunakan useState / Reducer + Redux untuk aplikasi yang complex / large size apps

Bingung dengan Penjelasannya?

Sampai di titik ini pastinya kita masih akan bingung dengan penggunaan Redux itu seperti apa yah !

Mari kita coba analogikan seperti apa Redux itu bekerja

Redux - How it Work? (Analogy)

  • Misalnya sekarang ini kita akan menarik uang kita yang ada di bank (asumsi kita sekarang sudah di bank yah)
  • Maka sekarang, di otak kita, hanya ada satu intensi / aksi a.k.a Action, yaitu: TARIK_UANG
  • Lalu selanjutnya kita akan menuju Teller untuk memberitahukan apa yang ingin kita lakukan
  • Kita beritahukan kepada Teller: saya ingin TARIK_UANG
  • Selanjutnya, Teller akan menginputkan perintah pada komputer yang dia miliki dan poof, kita mendapatkan uangnya
  • Pertanyannya adalah: Kok kita ga langsung ke brankas kita di bank untuk ambil uangnya?
  • Ya, seperti yang kita sudah ketahui, Bank ga gitu keles !, Memang uang kita ada nya di brankas Bank-nya, tapi kita harus berkomunikasi via Teller untuk membantu kita dalam memenuhi langkah-langkah yang dibutuhkan untuk menarik uang kita sendiri !

Redux - How it Work? (Analogi)

Apabila digambarkan secara redux, langkah tersebut dapat dianalogikan sebagai berikut:

Brankas Bank ≈ Redux Store Merupakan sumber data Aplikasi. Menyimpan state dalam sebuah object yang di-manage oleh Redux Store.
Otak Kita ≈ Action State sifatnya read-only. Satu-satunya cara untuk mengubah State adalah dengan cara meng-emit suatu action, suatu Object yang mendeskripsikan apa yang terjadi.
Teller ≈ Reducer Untuk menjelaskan bagaimana pohon (struktur) state ditransformasikan oleh action, kita akan membuat reducer murni.

Redux - How it Work? (Analogi)

Redux - How it Work? (Flow)

Nah berdasarkan analogi sebelumnya, alur kerja redux kira kira adalah sebagai berikut

Redux - Demo

Sudah sudah teorinya, mari kita demo untuk membuat kode kita dengan redux !

Langkah pengerjaannya adalah sebagai berikut:

  1. Pastikan sudah inisialisasi project dengan CRA
  2. Install redux dengan npm i redux react-redux
  3. Membuat reducers yang baru dengan nama src/reducers/rootReducer.js (dibuat dari pengembangan src/reducers/counterReducer.js)
  4. Membuat store pada root component yang ada di index.js
  5. Import Provider dari react-redux, kemudian gunakan di dalam index.js (Anggap ini sebagai Context API dari redux ini, sehingga nanti bisa "teleport" ke dalam component apapun dalam React)
  6. Membuat kerangka Containers CounterReduxContainer.jsx terlebih dahulu, dan tambahkan pada routing yang ada di index.js
  7. Menggunakan useSelector (untuk memilih state) dan useDispatch (untuk memanggil action) pada Containers CounterReduxContainer

Redux - Demo

Sampai di sini kita sudah berhasil nih, menggunakan Action dari reducer yang tidak memiliki data tambahan (a.k.a Payload).

Lalu pertanyaannya sekarang adalah, bagaimanakah cara kita menggunakan redux, apabila actionnya membutuhkan suatu Payload?

Mari kita coba untuk memodifikasi kode sebelumnya agar bisa menggunakan Payload

Langkahnya adalah sebagai berikut:

  1. Memodifikasi CounterReduxContainer.jsx untuk menerima TextField dan 2 Button
  2. Memodifikasi CounterReduxContainer.jsx untuk menggunakan local state (Menangkap input dari TextField)
  3. Memodifikasi rootReducer.js untuk menambahkan reducer tambahan dengan menerima payload bernama amount
  4. Memodifikasi CounterReduxContainer untuk men-dispatch action yang ditambahkan sebelumnya

Kode yang dituliskan di atas dapat dilihat di sini yah

Redux - Conclusion

Bagaimana setelah kita menggunakan Redux sejauh ini?

  • Sudah cukup mudah bukan?
  • Tapi... untuk project yang besar, yang menggunakan Redux dengan reducer yang cukup banyak, nantinya cara redux manual ini akan mengalami kesulitan yang cukup besar
  • Khususnya ketika kita ingin menyatukan seluruh reducer yang ada ke dalam suatu tempat (a.k.a combining the reducer)
  • Maka muncul suatu solusi yang baru: Bagaimana bila kita membuat suatu tools yang teropini yang bisa mempermudah penggunaan redux dan react-redux di dalam ekosistem React?
  • Sehingga muncul tools baru yang kekinian: Redux Toolkit (RTK)

Redux Toolkit - What Is?

Jadi apa itu Redux Toolkit?

Redux Toolkit adalah suatu package yang diharapkan menjadi cara umum dalam menuliskan logic Redux. awalnya Redux Toolkit ini dibuat untuk membantu programmer dalam menghadapi 3 masalah berikut:

  • "Konfigurasi Redux Store terlalu ribet !"
  • "Duh, package yang diinstall untuk redux doank terlalu banyak !"
  • "Redux butuh terlalu banyak kode boilerplate-nya nih !"
  • Menuliskan actions dan reducers makin kompleks seiring dengan semakin besarnya aplikasi

Redux Toolkit - How To?

Wah kelihatannya seru yah ! Kita langsung masuk ke kodenya saja kalau gitu !

Yuk kita coba ubah lagi kode yang sebelumnya kita buat untuk menggunakan Redux Toolkit

  1. Install react-toolkit dengan npm i @reduxjs/toolkit
  2. Membuat sebuah file store utama kita pada src/app/store.js, file ini nantinya akan berisi seluruh reducer yang akan digunakan pada aplikasi.
  3. Modifikasi kode pada index.js untuk menggunakan store dari redux toolkit yang dibuat sebelumnya
  4. Voila ! Kode kita menjadi lebih ringkas bukan?

Kok kesannya mirip mirip saja yah...?

Ya ! karena kita baru menggunakan secuil kekuatan dari Redux Toolkit ini saja !

Redux Toolkit - How To?

Mari kita belajar sesuatu yang diperkenalkan pada Redux Toolkit: createSlice

createSlice merupakan fungsi bawaan dari Redux Toolkit, yang menerima initial state, sebuah Object yang berisi fungsi reducer, dan nama dari "slice" dan ...

secara OTOMATIS akan men-generate action creators dan action type yang berhubungan dengan reducer dan state yang dibuat !

Untuk apa ada ini? yuk kita coba lihat kode dengan slice ini !

Redux Toolkit - How To?

Langkah pengerjaannya adalah sebagai berikut:

  1. Membuat sebuah file pada src/features/counter/sliceCounter.js
  2. Membuat actions, selectors, dan reducersnya pada sliceCounter.js
  3. Modifikasi file src/app/store.js untuk menggunakan slice yang baru saja dibuat
  4. Modifikasi file src/containers/CounterReduxContainer.jsx untuk menggunakan reducer yang ada di store

Sampai disini mulai terlihat betapa "banyak otomasi" nya dengan Redux Toolkit ini bukan?

Kode yang dituliskan bisa dilihat di sini yah

Redux Toolkit - Conclusion

Hayo, apa yang kita dapatkan setelah menggunakan toolkit sejauh ini?

  • Kode menjadi lebih reusable
  • Lebih mudah dimengerti dan tidak mengandung if ... else ... yang terlalu banyak
  • Lebih mudah dimantain apabila kode sudah besar
  • Kode lebih terfokus pada permasalahan (logic), bye bye switch ... case ...

Notes:

  • Selanjutnya di dalam pembelajaran ini kita akan menggunakan Redux Toolkit, karena sudah menjadi standar React zaman now !
  • Dengan belajar langkah-per-langkah seperti ini, kita jadi mengerti betapa "enak"-nya menggunakan redux toolkit bukan? (Coba kalau kita belajar langsung ke toolkit, pasti dibilangnya.... susah bukan?)
  • Mengenai apa itu Thunk dan bagaimana cara menggunakannya (Hint: fetching data), akan kita pelajari pada pembelajaran selanjutnya yah !

QnA

Referensi

  • https://www.robinwieruch.de/redux-vs-usereducer/
  • https://redux.js.org/
  • https://react-redux.js.org/
  • https://redux-toolkit.js.org/
  • https://redux-toolkit.js.org/tutorials/quick-start
withered-flowers (2022)