Pengenalan kepada Thunks dalam Redux

Dalam bab sebelumnya, kami telah menyusun kerja pelayan, pangkalan data dan klien untuk pertukaran data. Sekarang kami perlu membuat jambatan terakhir yang akan membantu aplikasi Redux kami yang 'segerak' berinteraksi dengan klien tak segerak, yang kami buat dalam pelajaran terakhir bab sebelumnya, untuk menghantar permintaan dan menerima data yang diperlukan dalam respons.

Seperti yang kita ingat dari pelajaran pertama bahagian sebelumnya, Redux tidak tahu tentang kerja dengan logik tak segerak dan untuk ini kami akan menggunakan thunk middleware. Middleware ini membolehkan kerja dengan actions yang dihantar, menggunakan dalam kod thunk kami kaedah dispatch dan getState store, dan juga membantu kaedah dispatch bekerja bukan hanya dengan objek JS biasa, tetapi juga dengan entiti seperti fungsi dan promis.

Biasanya fungsi thunk dipanggil dengan dua argumen dispatch dan getState (jika diperlukan), yang boleh digunakan dalam badan fungsi ini. Dengannya boleh menghantar actions biasa. Juga ia boleh dihantar melalui store.dispatch. Contoh fungsi tersebut diberikan di bawah:

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 kami dengan produk. Perkara pertama yang perlu kami dapatkan dari pelayan apabila aplikasi dilancarkan - ialah senarai produk. Oleh kerana biasanya thunks ditulis dalam fail slice, kami akan membuka fail productsSlice.js.

Berita gembira ialah kami tidak perlu bersusah payah dengan pemasangan Redux Thunk, kerana fungsi configureStore dari RTK telah melakukannya untuk kami. Jadi hanya tambahkan createAsyncThunk dalam import dalam fail:

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

Tambahkan juga dalam import klien kami:

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

Dan sekarang dengan bantuan createAsyncThunk buat thunk pertama kami untuk mendapatkan produk, lakukan ini sejurus selepas pengisytiharan objek initialState:

export const fetchProducts = createAsyncThunk()

Parameter pertama createAsyncThunk akan menerima rentetan untuk jenis action yang dijana, dan yang kedua - fungsi callback untuk payload, yang akhirnya akan mengembalikan sama ada data, atau promis dengan ralat (lihat fail client.js). Dalam kod fungsi kami memanggil client.get dan memberikan laluan, yang kami nyatakan pada pelayan (lihat parameter yang diterima http.get dalam server.js):

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

Buka aplikasi anda dengan pelajar. Buka dalamnya fail studentsSlice.js. Import ke dalamnya fungsi createAsyncThunk untuk mencipta thunk, dan juga client untuk menghantar permintaan API ke pelayan.

Sejurus selepas pengisytiharan objek initialState dengan menggunakan createAsyncThunk cipta thunk fetchStudents untuk mendapatkan senarai pelajar, yang akan menghantar permintaan GET ke alamat /fakeServer/students, dinyatakan oleh anda dalam fail server.js, dan mengembalikan response.data, seperti yang ditunjukkan dalam bahan pelajaran. Sebagai parameter pertama untuk createAsyncThunk nyatakan rentetan students/fetchStudents untuk jenis action.