Lägga till ett slice i Redux

Vi har förberett de grundläggande verktygen för att skapa vårt Redux-program, nu kan vi gå vidare direkt till implementeringen av dess komponenter.

I den här lektionen börjar vi med begreppet slices (slices). Ett Redux-program har ett globalt tillstånd som lagras i store. Detta tillstånd delas upp i slices. I praktiken är ett slice en del av lagret som innehåller det ursprungliga tillståndet, reducer-logik och actions för en specifik del av applikationen.

I vår applikation kommer produkter att förekomma, följaktligen kommer den första slicen, som vi skapar, att innehålla information om produkter. När en slice skapas måste man också lägga till en reducer som vet hur man bearbetar denna information.

Låt oss gå in i mappen src och skapa en mapp parts, och sedan i den mappen products - här kommer vi att lägga alla filer med kod som relaterar till produkter. I mappen products skapar vi en fil productsSlice.js, och sedan importerar vi funktionen createSlice från RTK, med hjälp av vilken vi kommer att skapa slices:

import { createSlice } from '@reduxjs/toolkit'

Låt oss nu skapa en slice för produkter och kalla den 'products'. För egenskapen reducers lämnar vi tomma klammerparenteser för tillfället:

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

Vi måste också definiera initialState - slice-tillståndets initiala tillstånd som laddas när applikationen startas för första gången. Låt oss skriva det direkt efter importen och före skapandet av slicen. Låt det vara en array med ett par objekt som innehåller produktdata. Låt oss ange id för varje produkt, titel, beskrivning, pris och antal:

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

I slutet av filkoden tar vi från resultatet av funktionen createSlice den reducer som den genererade och exporterar den. Den kommer att vara användbar för oss i andra filer i applikationen:

export default productsSlice.reducer

Öppna er studentapplikation. Skapa en fil studentsSlice.js i den, som beskrivs i lektionen. Skapa i den med hjälp av createSlice en slice students. Låt slice:ns initiala värde vara en array med ett par objekt som innehåller studentdata.

För varje student, skapa fält: id, förnamn, efternamn, ålder och specialitet.

I slutet av filen studentsSlice.js exportera den resulterande reducern, som beskrivs i lektionen.