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

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

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

products/productsSlice.jsexport const addProduct = createAsyncThunk()

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

products/productsSlice.jsexport const addProduct = createAsyncThunk(
  'products/addProduct',
  async (newProduct) => {}
)

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

products/productsSlice.jsexport 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 හි අසමාන හැකියාව නිසා බව මතක තබා ගන්න):

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

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