Pengenalan Thunks di Redux

Di bab sebelumnya kita telah mengatur kerja server, basis data, dan klien untuk pertukaran data. Sekarang kita perlu membangun jembatan terakhir yang akan membantu aplikasi Redux kita yang terorganisir 'sinkron' berinteraksi dengan klien asinkron yang kita buat di pelajaran terakhir bab sebelumnya, untuk mengirim permintaan dan mendapatkan data yang diperlukan dalam respons.

Seperti yang kita ingat dari pelajaran pertama bagian sebelumnya, Redux tidak mengetahui cara kerja logika asinkron dan untuk ini kita akan menggunakan thunk middleware. Middleware ini memungkinkan kita untuk bekerja dengan actions yang dikirim, menggunakan metode dispatch dan getState dari store dalam kode thunk kita, serta membantu metode dispatch bekerja tidak hanya dengan objek JS biasa, tetapi juga dengan entitas seperti fungsi dan promise.

Biasanya fungsi thunk dipanggil dengan dua argumen dispatch dan getState (jika diperlukan), yang dapat digunakan dalam tubuh fungsi tersebut. Dengan menggunakannya kita dapat mengirim actions biasa. Fungsi ini juga dapat dikirim melalui store.dispatch. Contoh fungsi tersebut ditunjukkan di bawah ini:

const changeColorThunk = (dispatch, getState) => {
	const colorBefore = getState()
	console.log(`Warna Lama: ${colorBefore.color}`)
	
	dispatch(changeColor())
	
	const colorAfter = getState()
	console.log(`Warna Baru: ${colorAfter.color}`)
}

store.dispatch(changeColorThunk)

Sekarang mari buka aplikasi kita dengan produk. Hal pertama yang harus kita dapatkan dari server saat menjalankan aplikasi - adalah daftar produk. Karena biasanya thunks ditulis dalam file slice, maka kita akan membuka file productsSlice.js.

Kabar gembiranya adalah bahwa kita tidak perlu repot menginstal Redux Thunk, karena fungsi configureStore dari RTK telah melakukannya untuk kita. Jadi cukup tambahkan createAsyncThunk ke impor di file:

import { createSlice, nanoid, createAsyncThunk } from '@reduxjs/toolkit'

Tambahkan juga klien kita ke impor:

import { client } from '../../api/client'

Dan sekarang dengan bantuan createAsyncThunk buat thunk pertama kita untuk mendapatkan produk, lakukan ini segera setelah deklarasi objek initialState:

export const fetchProducts = createAsyncThunk()

Parameter pertama createAsyncThunk akan menerima string untuk tipe action yang dihasilkan, dan yang kedua - fungsi callback untuk payload, yang pada akhirnya akan mengembalikan baik data, maupun promise dengan error (lihat file client.js). Dalam kode fungsi kita memanggil client.get dan meneruskan jalurnya, yang telah kita tentukan di server (lihat parameter yang diterima http.get di server.js):

export const fetchProducts = createAsyncThunk(
	'products/fetchProducts',
	async () => {
		const response = await client.get('/fakeServer/products')
		return response.data
	}
)

Buka aplikasi Anda dengan siswa. Buka file studentsSlice.js di dalamnya. Impor fungsi createAsyncThunk ke dalamnya untuk membuat thunk, serta client untuk mengirim permintaan API ke server.

Segera setelah deklarasi objek initialState dengan bantuan createAsyncThunk buat thunk fetchStudents untuk mendapatkan daftar siswa, yang akan mengirim permintaan GET ke alamat /fakeServer/students, yang ditentukan di file server.js Anda, dan mengembalikan response.data, seperti yang ditunjukkan dalam materi pelajaran. Sebagai parameter pertama untuk createAsyncThunk tentukan string students/fetchStudents untuk tipe action.