Inleiding tot thunks in Redux

In die vorige hoofstuk het ons die werking van die bediener, databasis en kliënt gereël vir data-uitruiling. Nou moet ons die laaste skakel vaslê wat ons 'sinchroon' georganiseerde Redux toepassing sal help om te kommunikeer met die asinchrone kliënt wat ons op die laaste les van die vorige hoofstuk geskep het, om versoeke te stuur en die nodige data in die antwoord te ontvang.

Soos ons onthou uit die eerste lesse van die vorige afdeling, weet Redux niks van asinchrone logika nie en vir dit sal ons thunk middleware gebruik. Hierdie middleware laat toe om met gestuurde actions te werk, om die dispatch en getState metodes van die store in ons thunk-kode te gebruik, en om die dispatch-metode te help om nie net met gewone JS-objekte te werk nie, maar ook met entiteite soos funksies en beloftes.

Gewoonlik word 'n thunk-funksie met twee argumente dispatch en getState (indien nodig) geroep, wat gebruik kan word in die liggaam van hierdie funksie. Daarmee kan gewone aksies gestuur word. Dit kan ook gestuur word via store.dispatch. 'n Voorbeeld van so 'n funksie word hieronder gegee:

const changeColorThunk = (dispatch, getState) => {
	const colorBefore = getState()
	console.log(`Old Color: ${colorBefore.color}`)
	
	dispatch(changeColor())
	
	const colorAfter = getState()
	console.log(`New Color: ${colorAfter.color}`)
}

store.dispatch(changeColorThunk)

Laat ons nou ons produktoepassing oopmaak. Die eerste ding wat ons van die bediener moet kry wanneer die toepassing begin - is die lys van produkte. Aangesien thunks gewoonlik in snit-lêers geskryf word, sal ons die lêer productsSlice.js oopmaak.

Die goeie nuus is dat ons nie met die installering van Redux Thunk moet sukkel nie, aangesien die funksie configureStore van RTK dit reeds vir ons sal doen. Dus laat ons net createAsyncThunk by die invoer in die lêer voeg:

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

Laat ons ook ons kliënt by die invoer voeg:

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

En nou met behulp van createAsyncThunk skep ons ons eerste thunk om produkte te kry, laat ons dit direk na die verklaring van die voorwerp initialState doen:

export const fetchProducts = createAsyncThunk()

Die eerste parameter van createAsyncThunk sal 'n string vir die tipe gegenereerde aksie aanneem, en die tweede - 'n terugroepfunksie vir payload, wat uiteindelik óf data, óf 'n belofte met 'n fout sal terugstuur (kyk lêer client.js). In die funksiekode roep ons client.get en gee dit die pad wat ons op die bediener gespesifiseer het (kyk na die aanvaarde parameters http.get in server.js):

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

Maak jou studentetoepassing oop. Maak die lêer studentsSlice.js daarin oop. Voer die funksie createAsyncThunk in daardie lêer in om 'n thunk te skep, en ook client vir die stuur van API-versoeke na die bediener.

Direk na die verklaring van die voorwerp initialState skep met behulp van createAsyncThunk 'n thunk fetchStudents om die lys studente te kry, wat 'n GET-versoek sal stuur na adres /fakeServer/students, gespesifiseer in jou lêer server.js, en sal terugstuur response.data, soos getoon in die lesmateriaal. As eerste parameter vir createAsyncThunk, spesifiseer die string students/fetchStudents vir die aksietipe.