Redux වලට ස්ලයිසයක් එකතු කිරීම

අපි අපගේ Redux ඇප් එකක් සෑදීම සඳහා මූලික මෙවලම් සකස් කර ඇත, දැන් අපට එහි අංග සෘජුවම ක්‍රියාවට නැංවීමට යා හැකිය.

මෙම පාඩමෙන් අපි ආරම්භ කරන්නේ ස්ලයිස (slices) යන සංකල්පයෙනි. Redux ඇප් එකකට එක් ගෝලීය අවස්ථාවක් ඇති අතර එය store එකේ ගබඩා වේ. මෙම අවස්ථාව ස්ලයිස් වලට කැඩී යයි. ඇත්ත වශයෙන්ම, ස්ලයිස් යනු නිශ්චිත කොටසක් සඳහා ආරම්භක අවස්ථාව, reducer තර්ක සහ actions අඩංගු ගබඩාවේ කොටසකි.

අපගේ ඇප් එකේ නිෂ්පාදන ඇතුළත් වනු ඇත, ඒ අනුව අපි කරන පළමු ස්ලයිස් එක නිෂ්පාදන පිළිබඳ තොරතුරු අඩංගු වේ. එසේම ස්ලයිස් එකක් සෑදීමේදී reducer එකක් එකතු කිරීම අවශ්‍ය වන අතර එය මෙම තොරතුරු කෙසේ සැකසිය යුතුදැයි දනී.

අපි src ෆෝල්ඩරයට ගොස් parts ෆෝල්ඩරය සාදා ඉන්පසු එහි products ෆෝල්ඩරය - මෙහි අපි නිෂ්පාදන සම්බන්ධ සියලු කේත ගොනු තබමු. products ෆෝල්ඩරය තුළ අපි productsSlice.js ගොනුව සාදා පසුව RTK වෙතින් createSlice ශ්‍රිතය ආයාත කරන්නෙමු, එමගින් අපි ස්ලයිස් සාදන්නෙමු:

parts/products/productsSlice.jsimport { createSlice } from '@reduxjs/toolkit'

දැන් අපි නිෂ්පාදන සඳහා ස්ලයිස් එකක් සාදා එය 'products' ලෙස නම් කරමු. reducers ගුණාංගය සඳහා අපි දැනට හිස් වරහන් තබමු:

parts/products/productsSlice.jsconst productsSlice = createSlice({
  name: 'products',
  initialState,
  reducers: {}
})

එසේම අපට initialState - ස්ලයිස් අවස්ථාවේ ආරම්භක තත්වය නිර්වචනය කිරීම අවශ්‍ය වේ, එය ඇප් එක පළමු වරට දිව යන විට පූරණය වේ. අපි එය ආයාත කිරීමට පසුවත් ස්ලයිස් සෑදීමට පෙරත් වහාම ලියමු. එය නිෂ්පාදන දත්ත අඩංගු වස්තූන් කිහිපයකින් යුත් අරාවක් වේවා. සෑම නිෂ්පාදනයක් සඳහාම id, නම, විස්තරය, මිල සහ ප්‍රමාණය දක්වන්න:

parts/products/productsSlice.jsconst initialState = [
  {
    id: '1',
    title: 'Product1',
    desc: 'This is an amazing product',
    price: '300',
    amount: '30',
  },
  {
    id: '2',
    title: 'Product2',
    desc: 'This is a nice product',
    price: '700',
    amount: '12',
  },
]

ගොනු කේතය අවසානයේ, createSlice ශ්‍රිතය විසින් ජනනය කරන ලද reducer එක අපි ගෙන අපනයනය කරන්නෙමු. එය අපට ඇප් එකේ අනෙකුත් ගොනු වලට අවශ්‍ය වේ:

parts/products/productsSlice.jsexport default productsSlice.reducer