Добавяне на слайс в Redux

Подготвихме основните инструменти за създаване на нашето Redux приложение, сега можем да преминем директно към имплементирането на неговите компоненти.

В този урок ще започнем с понятието слайсове (slices). Redux приложението има едно глобално състояние, което се съхранява в store. Това състояние се разделя на слайсове. Всъщност, слайсът е част от хранилището, съдържаща началното състояние, логиката на редукторите и действията за определена част от приложението.

В нашето приложение ще има продукти, съответно първият слайс, който ще направим, ще съдържа информация за продуктите. Също така при създаването на слайс е необходимо да се добави редуктор, който знае как да обработва тази информация.

Нека влезем в папката 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