Lisäreduxerit Reduxissa

Avataan tuotesovelluksemme, ja siinä tiedosto productsSlice.js. Oletetteko huomanneet, että loimme thunkin fetchProducts erillisenä funktiona? Teimme niin, koska createSlice ei tue thunkien määrittelyä. Miten saammekaan tässä tapauksessa reduserin sliceen products vastaamaan actioneihin, jotka on määritelty products:n ulkopuolella? Meidänhan täytyy käsitellä thunkin fetchProducts lähettämät actionit.

Tällaisia tapauksia varten createSlice:lla on ominaisuus extraReducers, joka mahdollistaa lisäreduxereiden lisäämisen, jotka puolestaan käsittelevät actionit, jotka eivät ole määritelty tässä slicessa.

Lisätään nyt createSlice-funktion sisällä ominaisuuden reducers ja kaikkien reduserien jälkeen vielä yksi metodi extraReducers:

extraReducers() {},

Tälle metodille meidän on annettava objekti builder, jolla on metodeja, joiden avulla voidaan lisätä lisäreduxereita:

extraReducers(builder) {},

Käytämme yhtä builder:n metodeista - addCase, joka ottaa ensimmäisenä parametrina action creatorin ja toisena reduserin. Yksi actioneista, jonka fetchProducts lähettää pyynnön yhteydessä on fetchProducts.pending, joka kertoo meille, että pyyntö on lähetetty. Muutetaan tässä tapauksessa status arvoon 'in progress' (aiemmin se oli 'idle'):

extraReducers(builder) {
	builder.addCase(fetchProducts.pending, (state) => {
		state.status = 'in progress'
	})
},

Käsitellään nyt action, joka lähetetään onnistuneen pyynnön tapauksessa. Tässä muutamme paitsi statuksen tilassa arvoon 'success', otamme myös tuotteet sliceen products actionin payload:sta. Kerätäksemme kaikki tuotteet tarvitsemme methodin concat:

extraReducers(builder) {
	builder
		.addCase(fetchProducts.pending, (state) => {
			state.status = 'in progress'
		})
		.addCase(fetchProducts.fulfilled, (state, action) => {
			state.status = 'success'
			state.products = state.products.concat(action.payload)
		})
},

Epäonnistuneen pyynnön tapauksessa muutamme statuksen arvoon 'fail' ja kirjoitamme tilaan virheilmoituksen:

.addCase(fetchProducts.rejected, (state, action) => {
	state.status = 'fail'
	state.error = action.error.message
})

Jos käynnistämme sovelluksemme nyt ja klikkaamme valikosta kohtaa 'Products', niin parin sekunnin kuluttua (muistatteko viiveen, joka asetimme palvelimelle?) näemme listan tuotteista.

Samalla tavalla näemme muutokset myös Redux DevToolsissa. Nyt tuotteemme ilmestyvät myös tilaan (katso välilehti 'State'), jos olet klikannut actionia products/fetchProducts/fulfilled. Sinne ilmestyy myös uusi status 'success'. Klikkaa nyt actionia products/fetchProducts/pending ja katso, miten välilehti 'State' eroaa nyt.

Ainoa epämiellyttävä seikka, joka sinulla voi sattua (puhuin tästä edellisellä oppitunnilla) - on tietojen pyynnön kaksoiskappaleet. Tämän seurauksena, meillä listassa ei ole 8, vaan kokonaiset 16 tuotetta ja kriittisiä varoituksia kehittäjän konsolissa. Selvitetään tästä seuraavalla oppitunnilla.

Avaa opiskelijasovelluksesi. Avaa siinä tiedosto studentsSlice.js. createSlice-funktion sisällä ominaisuuden reducers jälkeen lisää ominaisuus extraReducers. Anna metodille extraReducers builder.

builder.addCase-metodin avulla lisää käsittely actioneille pending, fulfilled ja rejected, jotka fetchStudents lähettää datan pyynnön yhteydessä, kuten oppitunnilla näytettiin.