Slice byvoeging in Redux

Ons het die hoofinstrumente voorberei vir die skepping van ons Redux-toepassing, nou kan ons oorgaan direk na die implementering van sy komponente.

In hierdie les sal ons begin met die konsep van slices (slices). 'n Redux-toepassing het een globale state wat in die store gestoor word. Hierdie state word opgedeel in slices. In werklikheid, is 'n slice 'n stukkie van die stoor, wat die oorspronklike state, die reducerse logika en aksies vir 'n spesifieke deel van die toepassing bevat.

In ons toepassing sal produkte figureer, dienvolgens sal die eerste slice, wat ons sal maak, inligting oor produkte bevat. Ook by die skepping van 'n slice is dit nodig om 'n reducer by te voeg, wat weet hoe om hierdie inligting te verwerk.

Laat ons na die vouer src gaan en 'n vouer parts skep, en dan daarin 'n vouer products - hierin sal ons al die lêers met kode wat na produkte verwys, neersit. In die vouer products sal ons die lêer productsSlice.js skep, en dan uit RTK die funksie createSlice importeer, waarmee ons die slices sal skep:

import { createSlice } from '@reduxjs/toolkit'

Laat ons nou 'n slice vir produkte skep en dit 'products' noem. Vir die eienskap reducers sal ons vir nou leë krulhakies los:

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

Ook moet ons die initialState definieer - die aanvanklike toestand van die slice state wat by die eerste laai van die toepassing gelaai sal word. Laat ons dit dadelik na die import en voor die skepping van die slice skryf. Laat dit 'n array van 'n paar voorwerpe wees, wat data oor produkte bevat. Laat ons vir elke produk id, naam, beskrywing, prys en hoeveelheid aandui:

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

Aan die einde van die lêer se kode sal ons uit die resultaat van die funksie createSlice die reducer wat daardeur gegenereer is neem en dit eksporteer. Dit sal nuttig wees vir ons in ander lêers van die toepassing:

export default productsSlice.reducer

Maak jou toepassing vir studente oop. Skep daarin die lêer studentsSlice.js, soos beskryf in die les. Skep daarin met die hulp van createSlice die slice students. As aanvanklike waarde van die slice laat daar by u 'n array van 'n paar voorwerpe wees, wat data oor studente bevat.

Maak vir elke student die velde: id, naam, van, ouderdom en spesialisasie.

Aan die einde van die lêer studentsSlice.js eksporteer die verkry reducer, soos beskryf in die les.