Redux-a bölüm goşmak

Biz öz Redux programamyzy döretmek üçin esasy gurallary taýýarladyk, indi onuň komponentlerini amala aşyrmaga göni geçip bileris.

Bu sapakda biz bölümler (slices) düşünjesi bilen başlarys. Redux programasy, store-da saklanýan bir global ýagdaýa eýedir. Bu ýagdaý bölümlere bölünýär. Esasan, bölüm, programanyň belli bir bölegi üçin başlangyç ýagdaýy, reducer we amallaryň logikasyny öz içine alýan haýsydyr bir saklawyň bir bölegidir.

Programamyzda önümler bolup geçer, şonuň üçin birinji bölüm, biz edjek bolşumyz ýaly, önümler barada maglumatlary öz içine alyr. Şeýle hem, bölüm döredilende, bu maglumatlary nädip işlemelidigini bilýän reducer-i goşmak gerek.

Geliň src bukjasyna giriň we parts bukjasyny dörediň, soňra onuň içinde products bukjasyny - önümlere degişli bolan kody bar ähli faýllary şu ýere ýygnarys. In products bukjasyna biz productsSlice.js faýlyny dörederis, soňra RTK-dan createSlice funksiýasyny import ederis, onuň kömegi bilen biz bölümleri dörederis:

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

Indi geliň önümler üçin bölüm dörediň we ona 'products' diýip at beriň. reducers aýratynlygy üçin biz häzir boş burç eýwany goýars:

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

Şeýle hem biz üçin initialState - ýagdaý böleginiň başlangyç ýagdaýy, programanyň ilkinji işledilen wagty ýüklenjek bolan, kesgitlenmeli. Ony import-dan soň we bölüm döredilmezden öň ýazalyň. Bu, birnäçe objekti öz içine alýan, önümleriň maglumatlaryny saklaýan massiw bolsun. Her bir önüm üçin id, ady, beýany, bahasy we sanyny görkezeliň:

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',
  },
]

Faýlyň kodunyň ahyrynda biz funksiýanyň işinden alnan netijeden createSlice onuň tarapyndan döredilen reducer-i alyp, ony eksport ederis. Ol biz üçin programanyň beýleki faýllarynda gerek bolar:

parts/products/productsSlice.jsexport default productsSlice.reducer