Redux හි අමතර රිඩියුසර්

අපගේ නිෂ්පාදන ඇප් එක විවෘත කරමු, එහි productsSlice.js ගොනුවද විවෘත කරමු. ඔබ සැලකිල්ලට ගත්තා විය හැකිය, අපි thunk fetchProducts නිර්මාණය කළේ වෙන් වූ ක්‍රියාකාරීත්වයක් ලෙසද? අපි එසේ කළේ createSlice thunks අර්ථ දැක්වීම සඳහා සහාය නොදක්වන බැවිනි. මෙම අවස්ථාවේදී, products ස්ලයිසයෙන් පිටත අර්ථ දක්වා ඇති ක්‍රියා සඳහා ප්‍රතිචාර දැක්වීමට අපගේ reducer බලහත්කාරයෙන් ක්‍රියා කරවන්නේ කෙසේද? යන්නෙන්. අපට ඇත්තටම සැකසිය යුතු ඒවා නම් thunk fetchProducts මගින් යවනු ලබන ක්‍රියා ය.

මෙවැනි අවස්ථා සඳහා, createSlice සතුව extraReducers යන දේපල ඇත, එය ඉඩ සලසයි අමතර රිඩියුසර් එකතු කිරීමට, ඒවා පිළිවෙලින් මෙම ස්ලයිසය තුළ නිර්වචනය නොකළ ක්‍රියා සැකසීමට.

දැන් අපි createSlice ක්‍රියාකාරීත්වයේ ශරීරය තුළ reducers දේපලට පසුව, සියලුම රිඩියුසර් සමඟ තවත් ක්‍රමයක් එකතු කරමු extraReducers:

extraReducers() {},

මෙම ක්‍රමයට අපි වස්තුවක් builder සම්ප්‍රේෂණය කළ යුතුය, එයට ක්‍රම ඇත, එමගින් අමතර රිඩියුසර් එකතු කළ හැකිය:

extraReducers(builder) {},

අපි builder හි එක් ක්‍රමයක් භාවිතා කරමු - addCase, එය පළමු පරාමිතියක් ලෙස පිළිගනී action creator, සහ දෙවන පරාමිතිය reducer ලෙස ගනී. එක් ක්‍රියාවක්, එය අප වෙත යවනු ඇත fetchProducts ඉල්ලීමේදී මෙය fetchProducts.pending, එය අපට පවසයි ඉල්ලීම යවා ඇති බව. අපි මේකෙන් අවස්ථාවක status වෙනස් කරමු 'in progress' (මෙයට පෙර එය 'idle' විය):

extraReducers(builder) {
	builder.addCase(fetchProducts.pending, (state) => {
		state.status = 'in progress'
	})
},

දැන් යවනු ලබන ක්‍රියාව සැකසමු සාර්ථක ඉල්ලීමකදී. මෙහිදී අපි status පමණක් නොව state තුළත් වෙනස් කරමු. 'success', නමුත් නිෂ්පාදන ගන්න ස්ලයිස් products වෙතින් payload ක්‍රියාව. සියලුම නිෂ්පාදන එකතු කිරීමට අපට අවශ්‍ය වනු ඇත ක්‍රමය concat:

extraReducers(builder) {
	builder
		.addCase(fetchProducts.pending, (state) => {
			state.status = 'in progress'
		})
		.addCase(fetchProducts.fulfilled, (state, action) => {
			state.status = 'success'
			state.products = state.products.concat(action.payload)
		})
},

අසාර්ථක ඉල්ලීමකදී අපි වෙනස් කරමු status වෙනස් කරන්න 'fail' සහ state තුළට ලියන්න දෝෂ පණිවිඩය:

.addCase(fetchProducts.rejected, (state, action) => {
	state.status = 'fail'
	state.error = action.error.message
})

අපි දැන් අපගේ ඇප් එක ආරම්භ කළහොත් සහ මෙනුවේ ක්ලික් කරන්න 'Products', එවිට තත්පර කිහිපයකින් (ප්‍රමාදය ගැන මතකද, අපි සේවාදායකයෙහි සකස් කළේ?), අපට පෙනෙනු ඇත නිෂ්පාදන ලැයිස්තුව.

එලෙසම අපි වෙනස්කම් දකිනු ඇත Redux DevTools හි දී. දැන් අපගේ නිෂ්පාදන දිස්වනු ඇත state තුළද (තට්ටුව බලන්න 'State'), ඔබ ක්‍රියාව මත ක්ලික් කර ඇත්නම් products/fetchProducts/fulfilled. එහි නව status ද දිස්වනු ඇත 'success'. දැන් ක්‍රියාව මත ක්ලික් කරන්න products/fetchProducts/pending සහ බලන්න, තට්ටුව දැන් වෙනස් වී ඇත්තේ කුමක් ද 'State'.

එකම අප්‍රසන්න අවස්ථාව, එය ඔබට සිදුවිය හැකිය (මම මේ ගැන කතා කළෙමි පෙර පාඩමේ) - මෙය ද්විත්ව කිරීමයි දත්ත ඉල්ලීම. එහි ප්‍රතිඵලයක් ලෙස, අපට ලැයිස්තුවේ එය නොවේ 8, නමුත් සම්පූර්ණයෙන්ම 16 නිෂ්පාදන සහ තීරණාත්මක අනතුරු ඇඟවීම් සංවර්ධක කොන්සෝලයේ. අපි මෙය ඊළඟ පාඩමේදී විසඳා ගනිමු.

ඔබගේ ශිෂ්ය ඇප් එක විවෘත කරන්න. එහි ගොනුව විවෘත කරන්න studentsSlice.js. විසින් ක්‍රියාකාරීත්වයේ ශරීරය createSlice දේපලට පසුව reducers දේපල එකතු කරන්න extraReducers. ක්‍රමයට සම්ප්‍රේෂණය කරන්න extraReducers builder.

ක්‍රමය භාවිතා කරමින් builder.addCase ක්‍රියා සැකසීම එකතු කරන්න pending, fulfilled සහ rejected, එම යවන fetchStudents දත්ත ඉල්ලීමේදී