Redux හි අලෙවිකරුවන්ගේ දත්ත ලබා ගැනීම

අපේ නිෂ්පාදන සමඟ අපගේ යෙදුම දියත් කරමු. නිෂ්පාදන කාඩ්පත්වල අලෙවිකරුවන් පෙන්වන්නේ නැති බව අපට පෙනේ. ඒවා ලබා ගෙන සර්වරයෙන් එම දත්ත ප්‍රදර්ශනය කරමු. මේ සඳහා අපට දැනටමත් හුරුපුරුදු ක්‍රියාවලියක් කිරීමට සිදුවනු ඇත.

පළමුව, අපි server.js ගොනුව විවෘත කරමු. අපි handlers අරාව සොයා ගෙන තවත් එක් GET- ඉල්ලීමක් පිළිබඳ ප්‍රතිකර්මයක් එක් කරමු (නිෂ්පාදන සඳහා GET ප්‍රතිකර්මයට පසුව). ඔබට පෙනෙන පරිදි, එය practically සමානයි:

http.get('/fakeServer/sellers', async () => {
	await delay(ARTIFICIAL_DELAY_MS)
	return HttpResponse.json(db.seller.getAll())
}),

අපි සර්වරයේ ඉල්ලීම ප්‍රතිකර්මය කළෙමු. ඊළඟ පියවර වනුයේ, අපි sellersSlice.js ගොනුව තුළ සර්වරයෙන් දත්ත ලබා ගැනීම සඳහා thunk එකක් ලිවිය යුතුය. මේ සඳහා අපි එයට client සහ createAsyncThunk ආයාත කරමු:

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
import { client } from '../../api/client'

දැන් අපි අලෙවිකරුවන් සර්වරයෙන් ලබා ගනිමු, එබැවින් අපි ඔවුන්ව initialState වෙතින් ඉවත් කරමු, පැවැත්වීම හිස් වරහන් පමණක්:

const initialState = []

ඊළඟට, sellersSlice ශ්‍රිතයට පෙර අපගේ thunk fetchSellers සාදන්න. සේවාලාභියාට අපි සර්වරයේ අපි නිශ්චිතව ඇති මාර්ගය යොමු කරමු:

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

අපට ඉතිරිව ඇත්තේ sellersSlice සඳහා අතිරේක reducer එකක් සෑදීම පමණි. අපි මෙහිදී සාර්ථක ඉල්ලීමක ප්‍රතිකර්මය දක්වා සීමා වෙමු. fetchSellers මගින් ජනනය කරනු ලබන සියලුම actions, fetchProducts හි actions සමඟ සමාන වනු ඇත:

const sellersSlice = createSlice({
	name: 'sellers',
	initialState,
	reducers: {},
	extraReducers(builder) {
		builder.addCase(fetchSellers.fulfilled, (state, action) => {
			return action.payload
		})
	},
})

අමතක නොකරන්න, පෙර වතාවේ නිෂ්පාදන ලබා ගැනීමේදී අපි state හි වත්මන් අගය වෙනස් කළෙමු. මෙහිදී අපි තරමක් වෙනස් මාර්ගයක් භාවිතා කර නව අගයක් ආපසු ලබා දුන්නෙමු, createSlice හිද එය කළ හැකිය. මෙමගින් අපි අරමුණු දෙකක් ඉටු කළෙමු. පළමුව, අපට දත්ත ලැබුණි, දෙවනුව, දැන් අලෙවිකරුවන්ගේ ලැයිස්තුවේ වෙනත් කිසිවක් දිස්වන්නේ නැති බවට අපට සහතිකයක් ඇත, මන්ද අපි සම්පූර්ණයෙන්ම action.payload අගයෙන් slice නැවත ලියන ලදී.

ඔබේ ශිෂ්‍යයන් සමඟ යෙදුම විවෘත කරන්න. එහි server.js ගොනුව විවෘත කරන්න, අරාවට handlers ගුරුවරුන් සඳහා තවත් GET-ඉල්ලීමක් සඳහා handler එකක් එක් කරන්න.

දැන් teachersSlice.js ගොනුව විවෘත කරන්න. initialState හිස් අරාවක් කරන්න, පාඩමේ පෙන්වා ඇති පරිදි. studentsSlice ශ්‍රිතයට පෙර fetchTeachers thunk එක ලියන්න.

createSlice ශ්‍රිතයේ අතිරේක reducer එක එකතු කරන්න, සාර්ථක ඉල්ලීමක ප්‍රතිකර්මය දක්වා සීමා වන්න.