Redux වල තවත් slice එකක් එකතු කිරීම

කලින් පාඩම්වලදී අපි products සඳහා ඇති products slice එක කෙරෙහි තදින් වැඩ කළෙමු. සැබෑ Redux යෙදුමක state එක තුළ විවිධ අවශ්‍යතා සඳහා slices ගොඩක් තිබිය හැකිය. එබැවින් මෙම පාඩමේදී අපි state එකට තවත් slice එකක් එකතු කරන්නෙමු, අපගේ යෙදුමේ products එකතු කරන විකුණුම්කරුවන් සඳහායි.

අපගේ products යෙදුම විවෘත කර ගෙන, පළමුව අපි කරන්නේ parts ෆෝල්ඩරය තුළ තවත් ෆෝල්ඩරයක් නිර්මාණය කිරීමයි: sellers. මෙහිදී අපි විකුණුම්කරුවන්ට අදාළ සියලු කේත සහ components තබමු.

දැන්, products සමඟ වූ ආකාරයටම, අපි විකුණුම්කරුවන් සඳහා slice එකක් නිර්මාණය කරමු. පළමුව, sellers ෆෝල්ඩරය තුළ sellersSlice.js ගොනුව නිර්මාණය කර එයට createSlice ආයාත කරමු:

parts/sellers/sellersSlice.jsimport { createSlice } from '@reduxjs/toolkit'

මීළඟට සම්මත පියවර අනුගමනය කරමු. slice එක සඳහා ආරම්භක අගය ලෙස විකුණුම්කරුවන් හතර දෙනෙකු නිර්මාණය කරමු. සරල කිරීම සඳහා ඔවුන්ට ක්ෂේත්‍ර දෙකක් තිබේ: id සහ name:

sellers/sellersSlice.jsconst initialState = [
  { id: '0', name: 'Super Power' },
  { id: '1', name: 'Miracle Life' },
  { id: '2', name: 'Dolls&Toys' },
  { id: '3', name: 'Granny' },
]

පහත දැක්වෙන ආකාරයට createSlice භාවිතයෙන් sellers slice එක නිර්මාණය කරමු, එයට ආරම්භක අගය පවරමු. අපි අනාගතයේදී විකුණුම්කරුවන් එකතු කිරීම හෝ ඔවුන්ගේ දත්ත යාවත්කාලීන කිරීම කරන්නේ නැති නිසා, reducers ක්ෂේත්‍රය හිස්ව තබමු:

sellers/sellersSlice.jsconst sellersSlice = createSlice({
  name: 'sellers',
  initialState,
  reducers: {},
})

ගොනුවේ අවසානයේදී, ලබාගත් reducer එක නිර්යාත කිරීම අමතක නොකරමු:

sellers/sellersSlice.jsexport default sellersSlice.reducer

දැන් අපි app ෆෝල්ඩරය තුළ ඇති store.js ගොනුව විවෘත කර ලබාගත් reducer එක ආයාත කළ යුතුයි:

app/store.jsimport sellersReducer from '../parts/sellers/sellersSlice'

ඉන්පසුව එය configureStore තුළ sellers සඳහා වන reducer ලෙස පවරමු:

app/store.jsexport default configureStore({
  reducer: {
    products: productsReducer,
    sellers: sellersReducer,
  },
})