Додавање на слајс во 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