Reduseerders in Redux

Op die vorige les het ons met behulp van die funksie createSlice 'n skyfie vir produkte products en 'n reduseerder geskep wat hierdie skyfie, wat in die store gestoor word, sal opdateer. Ek herinner u weer dat data in Redux-staat verander met behulp van reduseerders.

Onthou dat daar 'n aantal beperkings op reduseerders is. 'n Reduseerder dateer die toestand slegs op grond van die ontvangde waardes van die huidige toestand en die action-objek, en besluit dan hoe om die toestand te verander en gee sy nuwe waarde terug.

Ons weet dat objekte en skikkings in JavaScript by verstek muteerbaar (veranderbaar) is. Ons weet ook dat ons nie state direk kan verander nie, in so 'n geval moet ons slegs met kopieë werk. Hierdie reël moet ook deur die reduseerder gevolg word. Maar om sulke logika met die hand te skryf kan taamlik vermoeiend en moeilik wees, en hier kom die funksie createSlice te hulp, wat die biblioteek gebruik Immer, wat jou 'muteerbare' kode omskakel in 'onmuteerbare'. Dus, jy kan net sondig en die lewe vereenvoudig wanneer jy die funksies createSlice of createReducer gebruik.

Die beperkings van 'n reduseerder sluit ook in die gebruik van asinchrone logika, die berekening van ewekansige waardes en die uitvoering van ander "new effekte". En nou, nadat ons die reduseerder beter leer ken het, laat ons terugkeer na ons toepassing met produkte.

In ons toepassing is daar 'n store wat ons in vorige lesse geskep het, maar vir nou is daar niks in nie. Kom ons maak ons lêer store.js oop en voeg 'n bietjie kode daarin by. Laat ons eers die funksie reducer vir produkte daarin invoer:

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

Nou kan ons die ingevoerde funksie productsReducer as die reduseerder spesifiseer:

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

Met bogenoemde reël sê ons vir ons store dat nou, wanneer 'n aksie plaasvind, alle data vir die skyfie state.products sal opgedateer word deur die reduseerder productsReducer.

Nou kan jy die toepassing begin (let op, dat die waarskuwing oor 'n ongeldige reduseerder in die konsole verdwyn het!), maak Redux DevTools in die blaaier oop en deur sy oortjies blaai. Byvoorbeeld, deur op die oortjie State in die oortjie Inspector te kliek kan ons ons twee produkte-objekte sien, wat as die aanvanklike waarde van die staat met die eerste keer dat die toepassing begin het, vertoon is. Op die oortjie Log monitor sien ons watter skyfies die globale staat in homself het - dit is die skyfie products, wat twee objekte insluit. Kyk ook na die oortjie Chart.

Maak jou studentetoepassing oop en verander die kode van die lêer store.js, soos in die les gewys.

Begin jou toepassing in die blaaier en blaai deur die oortjies van die Redux DevTools-uitbreiding.