React Developer

PROA

Professional Academy

React Redux Middleware

Agenda

Apa saja yang akan dibahas?

  • Intro
  • Redux Middleware
  • Redux Toolkit - Thunk
  • RTK Query
  • QnA

Intro

Pertemuan sebelumnya sudah belajar Redux Toolkit nih

Mari hari ini kita belajar mengenai Redux tingkat lanjut yah

Redux Middleware

Middleware = Middle (Tengah), Ware (Sesuatu)

Sesuatu yang diselipkan di tengah-tengah

Redux Middleware ?

Sesuatu yang diselipkan di tengah tengah (alur logika) Redux

Redux Middleware (ii)

Mari kita coba lihat untuk alur kerja Redux dengan Middleware

Lalu sekarang pertanyaannya, untuk apa kita butuh Middleware ini?

Redux Middleware (iii)

Untuk apa kita butuh Middleware?

Katanya untuk menarik data dari API kan? Kenapa kita menggunakan Reducer saja secara langsung?

  • Reducers dirancang untuk selalu menjadi fungsi yang "murni" (Pure Function). Sehingga menarik data tidak bisa dilakukan di dalam reducer
  • Sedangkan kalau kita ingin Action untuk melakukan sesuatu, setiap kode harus dituliskan (hidup / live) di dalam sebuah function
  • Sehingga dengan menggunakan Middleware, akan melihat seluruh Action yang lewat dari aplikasi kita, dan apabila berupa function, Middleware akan Memanggil function tersebut.
  • Ini saja kok pekerjaan dari Middleware.

Redux Middleware - Example

Redux Middleware - Example

Salah tiga dari Middleware untuk Redux yang cukup terkenal mungkin adalah Thunk, Saga, Obseverable

Middleware ini akan menjadi penengah antara extension pihak ketiga (third-party extension) untuk dispatch action dan ketika Middleware ini sampai ke reducer.

Dalam real casenya, Middleware ini sering digunakan sebagai:

  • Logging dan Crash Reporting
  • Berkomunikasi dengan API secara async
  • Routing tingkat lanjut, dll

Redux Middleware - Example

Duh, ketika melihat kayak ini, apakah kita akan belajar ketiga-tiganya di hari ini?

Tentu saja tydaque, karena kita hanya akan fokus terhadap satu saja: Thunk

Tapi... tahukah Anda, ada hal yang menarik loh mengenai Thunk ini.

Thunk sudah di-include-kan ketika kita menggunakan configureStore yang ada di Redux Toolkit !

Jadi tanpa bersusah payah lagi, mari kita gunakan ... Redux Toolkit dan belajar tentang Thunk !

Redux Toolkit - Thunk

Jadi kita akan langsung belajar menggunakan Redux Toolkit untuk bisa melakukan fetch data dari luar yah !

(Walaupun katanya reducer tidak bisa mengambil data dari luar, tapi dengan Redux Toolkit yang sudah menyediakan Thunk di balik layar, kita bisa membuat "middleware" yang akan bertindak "seolah" seperti reducer yang kita buat sebelumnya loh !)

Misalnya dalam pembelajaran ini kita akan menggunakan kode kita pada pertemuan sebelumnya untuk mengambil data dari luar (https://reqres.in/api/users/:id)

Bagaimanakah cara kita melakukannya?

Redux Toolkit - Thunk (Demo)

Langkah-langkahnya adalah sebagai berikut:

  1. Clone repo starter dari link di sini
  2. cd ke project tersebut dan npm install terlebih dahulu untuk menginstall package yang dibutuhkan
  3. Tambahkan package axios dengan menggunakan npm install axios
  4. Jalankan project dengan menggunakan npm run start
  5. Modifikasi file src/features/counter/sliceCounter.js untuk menggunakan axios dan createAsyncThunk
  6. Modifikasi file src/containers/CounterReduxContainer.jsx untuk bisa memanfaatkan createAsyncThunk yang dibuat pada langkah sebelumnya

(Kelihatannya langkah nya sedikit, namun sebenarnya yang ditulis cukup banyak yah !)

Untuk melihat kode akhir yang dituliskan pada pembelajaran ini, dapat dilihat di sini yah

Redux Toolkit - Thunk (Conclusion Pt 1)

Bagaimana setelah melihat kodenya tadi?

Cukup banyak yah otomasi yang terjadi di balik layarnya?

Ingat baik baik bahwa RTK ini adalah sesuatu yang opinionated, sehingga banyak otomasi dan ruleset yang harus diikuti yah !

(Tapi sebenarnya itu sangat memudahkan kita sekali ketimbang harus menggunakan semuanya secara manual loh ...)

Yuk kita mencoba untuk memodifikasi kodenya sedikit lagi sehingga bisa menerima data dari userId yang berbeda-beda

Redux Toolkit - Thunk (Demo Pt 2)

Langkah yang harus dilakukan adalah sebagai berikut:

  • Modifikasi file src/containers/ContainerReduxContainer.jsx
    1. Menambahkan sebuah TextField untuk menampung userId yang akan dipilih dan sebuah Button untuk melakukan aksi pengambilan datanya
    2. Menambahkan sebuah State untuk TextField dan sebuah function untuk meng-handle onChange pada TextField
    3. Menambahkan event onClick untuk Button dan membuat sebuah function untuk meng-handle onClick pada Button tersebut. Di dalam function ini kita akan meng-dispatch function Thunk yang kita buat sebelumnya untuk mengambil data berdasarkan userId
    4. Voila ! Mari kita coba !

Apabila tertinggal, untuk kode lengkapnya dapat dilihat di sini yah

Redux Toolkit - Thunk (Conclusion Pt 2)

Wah, kode Part 2 ini perubahannya sedikit yah !

Ya, sedikit, karena logic untuk meng-fetch datanya sudah kita buat pada slice dengan sebaik-baiknya, sehingga perubahan kode pada Component menjadi sangat minimal

Ini juga menjadi dasar dari penggunaan Redux (baik RTK maupun murni Redux): Globalisasi / Sentralisasi Fitur !

Walaupun apabila kita tidak menggunakan RTK kode yang dibuat akan menjadi lebih ... banyak boilerplatenya

Tapi dari kode yang kita buat sebelumnya dengan RTK itu masih ada suatu kebimbangan hati:

Apabila kita ingin menggunakan banyak tarikan data dari satu API yang sama (misal sama sama dari https://reqres.in/api, tapi ingin GET POST PUT PATCH DELETE), bagaimanakah cara kita mengelompokan-nya?

Please welcome salah satu solusi yang dihadirkan di dalam RTK: Redux Toolkit Query (RTK Query)

RTK Query

Dokumentasi RTK Query bisa kita lihat di sini yah

Dilihat dari Dokumentasi, RTK Query ini adalah:

  • Tool untuk melakukan fetching data yang mumpuni dan untuk melakukan caching, yang didesain untuk mempermudah kasus umum untuk mengambil dan menunggu suatu data terambil di dalam sebuah aplikasi web.
  • Dibuat di atas Redux Toolkit Core, dan memanfaatkan createSlice dan createAsyncThunk untuk mengimplement segala kemampuan RTK Query
  • Sudah masuk di dalam package @reduxjs/toolkit sebagai ADDON TAMBAHAN
  • RTK Query boleh tidak digunakan ketika kita menggunakan RTK. Tapi dari developernya RTK menganggap bahwa RTK Query ini akan mempermudah hidup banyak developer...

RTK Query - Demo

Yuk kita langsung demo lagi

Pada demo kali ini kita akan menggunakan data yang disediakan dari https://reqres.in/api/colors

Kita akan memetakan seluruh HTTP Method yang ada pada API tersebut ke dalam RTK Query yang kita buat yah ! 

{
  "page": 1,
  "per_page": 6,
  "total": 12,
  "total_pages": 2,
  "data": [
    {
      "id": 1,
      "name": "cerulean",
      "year": 2000,
      "color": "#98B2D1",
      "pantone_value": "15-4020"
    },
    ...
  ]
}

RTK Query - Demo

Available Endpoints for https://reqres.in/api/colors:

  • GET /colors
  • POST /colors
  • GET /colors/:id
  • PUT /colors/:id
  • PATCH /colors/:id
  • DELETE /colors/:id

Untuk mempermudah testing yang kita miliki, sudah disediakan juga untuk Postman Collection-nya yang dapat diunduh di sini yah

Bayangkan apabila kita harus membuat ini satu-per-satu...

6 fnThunk + 6 x 3 ExtraReducers ... = 24 Fungsi yang harus dibuat !

Mari kita coba lihat dengan menggunakan RTK Query

RTK Query - Demo

Dengan RTK Query kita bisa apa saja sekarang?

  • Dengan RTK Query, kita bisa mendefinisikan API Endpoint seluruhnya dalam satu file
  • Jadi di dalam file ini, kita bisa mendefinisikan Method apa saja yang ada dan bagaimana cara kita meng-handlenya
  • RTK Query akan SECARA OTOMATIS membuatkan Hooks untuk menggunakan API berdasarkan Method yang didefinisikan (Psstttt: tidak perlu Axios loh !)
  • Setelah membuat file Service ini, kita bahkan bisa langsung menambahkannya ke reducer yang dibuat ke dalam store (Ya, ini bahkan juga dibuat secara OTOMATIS), dan Middlewarenya pun bisa kita definisikan nantinya (Woah....)
  • Dan pada akhirnya, YES, kita bisa menggunakan Hooks yang dibuat secara otomatis ini.

RTK Query - Demo

Langkah-langkahnya adalah sebagai berikut

  1. Membuat sebuah file baru pada src/services/reqresinColorAPI.js
  2. Menambahkan kode untuk membuat Service pada file tersebut dengan menggunakan @reduxjs/toolkit/query/react
  3. Menambahkan service yang sudah dibuat sebelumnya ke dalam store (src/app/store.js)
  4. Membuat component yang akan menampung nama dari warna yang ada pada src/components/ColorItem.jsx
  5. Membuat component yang akan menampung seluruh warna (listing warna) yang ada pada src/components/ColorList.jsx (Di sini lah kita akan menggunakan Hooks yang dibuat sebelumnya)
  6. Menampilkannya pada src/containers/ContainerReduxContainer.jsx

Penulisan kode di atas dapat dilihat di sini yah

(WARNING): Langkah ini terlihat sedikit, namun sebenarnya kode yang dituliskan cukup banyak yah !

RTK Query - Conclusion Pt 1

Wah setelah kita ngoding tadi, sepertinya jadi JAUH lebih pendek yah ketimbang kita menggunakan createAsyncThunk secara manual?

Tapi karena ini Opinionated, ada ruleset (aturan) yang harus kita ikuti yah jadinya !

Lalu dari tadi, kita cm GET GET GET aja nih...

Bagaimana bila seandainya kita ingin memanfaatkan yang ada Mutation datanya? (POST PUT PATCH DELETE)?

Yuk kita coba ubah kode kita sedikit lagi sehingga bisa menggunakan Mutation !

RTK Query - Demo Pt 2

Langkah-langkah untuk menggunakan Mutation adalah sebagai berikut:

  1. Membuat Component baru pada src/components/ColorForm.jsx
  2. Memasukkan Logic untuk menghandle state dari TextField yang dibutuhkan
  3. Import useMutation yang dibutuhkan (useAddColorMutation) dari services
  4. Menggunakan useAddColorMutation di dalam Component
  5. Import Component ColorForm pada src/containers/CounterReduxContainer.jsx

WARNING: walaupun di sini terlihat langkahnya sedikit, tapi sebenarnya butuh waktu lebih untuk bisa memahami langkah dan step yang ada di sini yah !

Untuk Kode yang dituliskan dapat dilihat di sini yah

RTK Query - Conclusion Pt 2

Sampai di titik ini artinya kita sudah berhasil menggunakan query dan mutation yang ada pada RTK Query

Selamat !

RTK Query - Conclusion Pt 2

Tapi... apakah ini berarti kita sudah berhasil menguasai semua yang ada di RTK Query? Maka jawabannya adalah tydaque yah

Sebenarnya di dalam RTK Query ini sendiri masih banyak fitur fitur tersembunyi yang belum dibahas di sini:

  • Menyiapkan fitur manual refetch data ketika terjadi Mutation
  • Menggunakan Tag untuk Meng-invalidate data yang ada, sehingga bisa dinyatakan tidak sah dan akan di-fetch ulang secara otomatis
  • Dan RTK Query tingkat lanjut lainnya...

RTK Query - Conclusion Pt 2

Jadi ada baiknya untuk mencoba yang versi standard (yang kita pelajari) ini terlebih dahulu yah, sebelum akhirnya kita mencoba menggunakannya dalam project kita ini

Sekali lagi, Redux Toolkit ini adalah kumpulan cara penggunaan Redux yang SANGAT TEROPINI sehingga banyak ruleset yang harus diikuti

Namun di balik hal tersebut, kita akan mendapatkan banyak keringanan dalam "memutuskan" suatu cara dan fitur fitur powerful, Apabila kita dapat memanfaatkannya dengan sebaik-baiknya

QnA

Referensi

  • https://medium.com/@andrewrymaruk/thunk-in-redux-360fe8ae8b5a
  • https://redux-toolkit.js.org/rtk-query/overview
withered-flowers (2022)