Slice pridėjimas į Redux

Mes paruošėme pagrindinius įrankius savo Redux programai kurti, dabar galime pereiti tiesiaiiai prie jos komponentų įgyvendinimo.

Šioje pamokoje pradėsime nuo sąvokos slice'ų (slices). Redux programa turi vieną globalią būseną, kuri saugoma store. Ši būsena yra suskaidoma į slice'us. Tiesą sakant, slice'as yra store'o dalis, kurioje yra pradinė būsena, reducerio logika ir action'ai konkrečiai programos daliai.

Mūsų programoje bus figūruojami produktai, atitinkamai pirmasis slice'as, kurį sukursime, talpins informaciją apie produktus. Taip pat, kurdami slice'ą, būtina pridėti reducerį, kuris žino, kaip apdoroti šią informaciją.

Įeikime į aplanką src ir sukurkime aplanką parts, o joje - aplanką products - čia mes sudėsime visus failus su kodu, susijusiu su produktais. Aplanke products sukursime failą productsSlice.js, o tada importuosime jame iš RTK funkciją createSlice, kurios pagalba ir kursime slice'us:

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

Dabar sukurkime produktų slice'ą ir pavadinkime jį 'products'. Savybei reducers kol kas palikime tuščias riestines skliaustus:

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

Taip pat mums reikia apibrėžti initialState - pradinę slice'o būsenos būseną, kuri bus įkelta pirmą kartą paleidus programą. Parašykime ją iškart po importo ir prieš kuriant slice'ą. Tegul tai bus masyvas iš poros objektų, kuriuose yra produktų duomenys. Nurodykime kiekvienam produktui id, pavadinimą, aprašymą, kainą ir kiekį:

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

Kodo failo pabaigoje mes iš funkcijos createSlice darbo rezultato paimsime jos sugeneruotą reducerį ir eksportuosime jį. Jis mums pravers kituose programos failuose:

parts/products/productsSlice.jsexport default productsSlice.reducer