Reducers i Redux

I förra lektionen skapade vi med funktionen createSlice en slice för produkter products och en reducer som kommer att uppdatera denna slice som lagras i store. Jag påminner ännu en gång att i Redux ändras tillståndsdata med hjälp av reducers.

Det är viktigt att komma ihåg att det finns ett antal begränsningar för reducers. En reducer uppdaterar endast tillståndet baserat på de mottagna värdena för det aktuella tillståndet och action-objektet, och bestämmer sedan hur tillståndet ska ändras och returnerar dess nya värde.

Vi vet att objekt och arrayer i JavaScript som standard är muterbara (föränderliga). Vi vet också att man inte får ändra state direkt, i så fall måste man bara arbeta med kopior. Denna regel måste följas av reducern också. Men att skriva en sådan logik manuellt kan vara ganska tröttsamt och komplext, och här kommer funktionen createSlice till undsättning, som använder biblioteket Immer, som omvandlar din 'muterbara' kod till 'icke-muterbar'. Således kan man bara "synda" och förenkla livet när man använder funktionerna createSlice eller createReducer.

Bland begränsningarna för en reducer finns också användning av asynkron logik, beräkning av slumpmässiga värden och utförande av andra "side effects". Och nu, efter att ha lärt känna reducern närmare, återvänder vi till vår produktapplikation.

I vår applikation finns en store som vi skapade i tidigare lektioner, men för närvarande finns det ingenting i den. Låt oss öppna vår fil store.js och lägga till lite kod i den. Låt oss först importera reducer-funktionen för produkter:

import productsReducer from '../parts/products/productsSlice'

Nu kan vi som reducer ange den importerade funktionen productsReducer:

export default configureStore({
	reducer: {
		products: productsReducer
	}
})

Med ovanstående rad säger vi till vår store att nu, när en action uppstår, kommer alla data för slicen state.products att uppdateras av reducern productsReducer.

Nu kan du starta applikationen (notera att varningen om ogiltig reducer har försvunnit i konsolen!), öppna Redux DevTools i webbläsaren och utforska dess flikar. Till exempel, genom att klicka på fliken State i Inspector-fliken kan vi se våra två produktobjekt som visades som initialt tillståndsvärde när applikationen startades för första gången. På fliken Log monitor ser vi vilka slicar det globala tillståndet innehåller - det är slicen products, som innehåller två objekt. Kika även på flik Chart.

Öppna din studentapplikation och ändra koden i filen store.js som visas i lektionen.

Starta din applikation i webbläsaren och utforska flikarna i tillägget Redux DevTools.