Kuongeza Slice kwenye Redux

Tumetayarisha zana za kimsingi za kuunda programu yetu ya Redux, sasa tunaweza kuanza kwa utekelezaji wa vipengele vyake moja kwa moja.

Katika somo hili tutaanza na dhana ya slice (slices). Programu ya Redux ina hali ya kimataifa moja ambayo huhifadhiwa kwenye duka. Hali hii imegawanywa katika slice. Kwa kweli, slice ni kipande cha kuhifadhi, kinachoshikilia hali ya asili, mantiki ya reducer na vitendo kwa sehemu fulani ya programu.

Katika programu yetu kutakuwa na bidhaa, kwa hivyo slice ya kwanza tutakayofanya, itakuwa na taarifa kuhusu bidhaa. Pia wakati wa kuunda slice ni muhimu kuongeza reducer, ambayo anajua jinsi ya kushughulikia taarifa hii.

Hebu tuingie kwenye folda src na tuunde folda parts, kisha ndani yake tuunde folda products - hapa tutaweka faili zote zenye msimbo, zinazohusiana na bidhaa. Ndani ya folda products tutaunda faili productsSlice.js, kisha tuingize ndani yake kutoka kwa RTK kitendo createSlice, kwa kutumia ambayo tutaunda slice:

import { createSlice } from '@reduxjs/toolkit'

Sasa hebu tuunde slice kwa bidhaa na tuiite 'products'. Kwa sifa reducers kwa sasa tutaacha mabano ya curly yaliyo wazi:

const productsSlice = createSlice({
	name: 'products',
	initialState,
	reducers: {}
})

Pia tunahitaji kufafanua initialState - hali ya kwanza ya slice ya hali, ambayo itapakiwa wakati wa kwanza kuanzisha programu. Hebu tuiandike mara moja baada ya kuingiza na kabla ya kuunda slice. Wacha iwe safu yenye jozi ya vitu, vinavyoshikilia data ya bidhaa. Tubainishe kwa kila bidhaa id, jina, maelezo, bei na kiasi:

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

Mwishoni mwa msimbo wa faili tutachukua matokeo ya kitendo createSlice tutachukua reducer iliyotengenezwa nayo na kuitoa. Itatufaa kwenye faili zingine za programu:

export default productsSlice.reducer

Fungua programu yako kwa wanafunzi. Undani ndani yake faili studentsSlice.js, kama ilivyoelezewa kwenye somo. Undani ndani yake kwa msaada wa createSlice slice students. Kwa thamani ya kwanza ya slice wacha iwe safu yenye jozi ya vitu, vinavyoshikilia data ya wanafunzi.

Kwa kila mwanafunzi fanya sehemu: id, jina, jina la ukoo, umri na taaluma.

Mwishoni mwa faili studentsSlice.js toa reducer iliyopatikana, kama ilivyoelezewa kwenye somo.