Redux හි thunk භාවිතයෙන් දත්ත යවමින්

පසුගිය පාඩමේදී අපි අපේ අත්හදා බැලීමේ සර්වරය මත POST ඉල්ලීමක් සකස් කිරීම සාකච්ඡා කළෙමු. අපි දැන් සර්වරයට ඉල්ලීමක් යවන thunk-කාර්යයක් ලියමු.

අපේ නිෂ්පාදන ඇප් එක විවෘත කරමු, එහි productsSlice.js ගොනුව තුළ. දැන් fetchProducts thunk එකට පසුව createAsyncThunk භාවිතයෙන් අපි addProduct thunk එක සෑදමු:

export const addProduct = createAsyncThunk()

createAsyncThunk හි පළමු පරාමිතිය ලෙස අපි 'products/addProduct' යොමු කරමු, දෙවන පරාමිතිය ලෙස අසම්පාතික කොල්බැක් එකක් යොමු කරමු, එය නව නිෂ්පාදනයක දත්ත ඇති වස්තුවක් පිළිගනු ඇත:

export const addProduct = createAsyncThunk(
	'products/addProduct',
	async (newProduct) => {}
)

මෙම කොල්බැක් එකේ කේතය තුළ අපි සේවාලාභියා කැදවමු, එයට මාර්ගය සහ නිෂ්පාදනය සහිත වස්තුව පරාමිති ලෙස ලබා දෙමු, පසුව ප්‍රතිචාර දත්ත ආපසු ලබා දෙමු:

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

දැන් පහත කේතය තුළ productsSlice සඳහා reducers ක්ෂේත්‍රය දෙස බලමු. කලින් අපි නව නිෂ්පාදනයක් එකතු කළේ productAdded reducer එක භාවිතයෙන්, එහි අපට reducer සහ prepare ක්‍රම තිබුණි. දැන් අපි අවශ්‍ය දත්ත සර්වරයේ ජනනය කර thunk සමඟ වැඩ කරන නිසා, මෙහි reducer productAdded කේතයෙන් සම්පූර්ණයෙන්ම ඉවත් කරමු. පසුව extraReducers ක්‍රමයට (එහි කේතයේ අවසානයට) තවත් අතිරේක reducer එකක් ඇතුළත් කරමු, එය සාර්ථක ඉල්ලීමකදී products slice එකට නව නිෂ්පාදනයක් payload එකෙන් කෙලින්ම එක් කරනු ඇත (එවැනි කේතයක් සිදුවිය හැක්කේ createSlice හි අසමාන හැකියාව නිසා බව මතක තබා ගන්න):

.addCase(addProduct.fulfilled, (state, action) => {
	state.products.push(action.payload)
})

ඔව්, මාර්ගය වන විට, ආයාත පේළිවලින් nanoid ඉවත් කිරීමට අමතක නොකරන්න, සහ ගොනුවේ අවසානයේ ක්‍රියා අපනයනයෙන් productAdded ඉවත් කිරීමට අමතක නොකරන්න.

ඔබගේ ශිෂ්ය ඇප් එක විවෘත කරන්න. එහි studentsSlice.js ගොනුව විවෘත කරන්න. createAsyncThunk භාවිතයෙන් තවත් thunk එකක් addStudent සාදන්න, එය නව ශිෂ්යයකු එකතු කිරීම සඳහා සර්වරයට POST ඉල්ලීමක් යවනු ඇත, පාඩමේ පෙන්වා දෙන්නේ පරිදි.

ඊළඟට පහත studentsSlice සඳහා වෙනස්කම් කරන්න: reducers ගුණාංගය තුළ reducer studentAdded සම්පූර්ණයෙන්ම ඉවත් කරන්න. extraReducers ක්ෂේත්‍රය තුළ අතිරේක reducer එකක් එක් කරන්න, එය සාර්ථක ඉල්ලීමකදී students slice එකට නව ශිෂ්යයකු payload එකෙන් එක් කරනු ඇත, පාඩමේ පෙන්වා දෙන්නේ පරිදි.