Redux හි reducer සහ action

පසුගිය පාඩමෙහිදී අපි නිෂ්පාදනයක් එකතු කිරීම සඳහා වූ පෝරමය නිම කළ අතර එය ප්‍රධාන පිටුවේ පෙන්වන ලදී. නමුත් මෙතෙක් එකතු කරන ලද දත්ත සුරැකෙන්නේ නැත, වෙනත් වචන වලින් කියනවා නම් නව නිෂ්පාදනය පවතින store එකට එකතු නොවේ. අපි එය නිවරදි කරමු.

ආරම්භ කිරීමට, අපගේ නිෂ්පාදන ඇප් එකෙහි අපි productsSlice.jsx ගොනුව විවෘත කර createSlice සඳහා වූ reducer ගුණයේ productAdded ශ්‍රිතය ලියන්නෙමු, එය store එකට නිෂ්පාදනයක් එකතු කිරීමෙහි ලා යෙදවෙනු ඇත, එයට ලබා දුන් වත්මන් state එක සහ action එක මත. මෙහිදී අපට සම්පූර්ණ state එක නොව, නිෂ්පාදන සඳහා වගකිව යුතු එහි කොටස පමණක් ලබා දෙන බව සලකන්න (products slice එකට එය පමණක් දැනගන්නට හැකිය). නව නිෂ්පාදනය සමඟ වස්තුව action වස්තුවේ payload ගුණයේ තිබේ, එය සාදනු ලබන්නේ පෝරමයේ සුරැකීම බොත්තම ක්ලික් කිරීමේ හැසිරවීම්කරු විසිනි. එහි ප්‍රතිඵලයක් ලෙස productAdded reducer එක createSlice කේතය තුළ මෙසේ පෙනෙනු ඇත:

products/productsSlice.jsconst productsSlice = createSlice({
  name: 'products',
  initialState,
  reducers: {
    productAdded(state, action) {
      state.push(action.payload)
    },
  },
})

Action එක ගැන කුමක් කිව හැකිද? පෙළපොතේ ආරම්භයේදීම අපි action එක ගැන සඳහන් කළෙමු, එය වස්තුවක් ලෙස නිරූපණය වන සමහර ඉසව්වක් වන අතර, ඇප් එකේ සිදු වූ දේ විස්තර කරයි. අපි එසේම action creator ශ්‍රිතය භාවිතා කළ හැකි බවද කියා සිටියෙමු, එය එවැනි වස්තුවක් සාදා දෙනු ඇත, උදාහරණයක් ලෙස මෙසේ:

jsxconst addProduct = newProduct => {
  return {
    type: 'products/productAdded',
    payload: newProduct
  }
}

හොඳ ප්‍රවෘත්තිය නම් අපට කිසිදෙයක් කිරීමට අවශ්‍ය නොවන අතර, එය අප වෙනුවෙන් createSlice ශ්‍රිතය විසින් කරනු ලබන බවයි, අපි භාවිතා කරන්නේ. අපි reducer එක ලිවීමත් සමඟම, එය ස්වයංක්‍රීයව action creator එකක් එකම නමින් අප වෙනුවෙන් සාදයි. අපට ඉතිරිව ඇත්තේ ලබාගත් action creator එක නිර්යාත කිරීම පමණි සංරචක තුළ තවදුරටත් යෙදීම සඳහා. අපි එය ගොනුව අවසානයේදී කරමු reducer එක නිර්යාත කිරීමට පෙර, මෙසේ:

products/productsSlice.jsexport const { productAdded } = productsSlice.actions
export default productsSlice.reducer