Ekstra Reducere i Redux

La oss åpne produktapplikasjonen vår, og i den filen productsSlice.js. Du har sannsynligvis lagt merke til at vi opprettet thunk fetchProducts som en separat funksjon? Vi gjorde det slik fordi createSlice ikke støtter definisjon av thunks. Hvordan kan vi i dette tilfellet få reduceren til products-skiven til å respondere på handlinger som er definert utenfor products-skiven? Vi trenger tross alt å behandle handlingene som thunken fetchProducts sender.

For slike tilfeller har createSlice egenskapen extraReducers, som tillater å legge til ekstra reducere, som igjen vil behandle handlinger definert ikke i denne skiven.

La oss nå i kroppen av funksjonen createSlice etter egenskapen reducers med alle reducerne legge til enda en metode extraReducers:

extraReducers() {},

Vi må sende et objekt builder til denne metoden, som har metoder som kan brukes til å legge til ekstra reducere:

extraReducers(builder) {},

Vi vil bruke en av metodene til builder - addCase, som tar en action creator som første parameter og en reducer som andre parameter. En av handlingene som fetchProducts vil sende ved forespørsel er fetchProducts.pending, som forteller oss at forespørselen er sendt. La oss i dette tilfellet endre statusen til 'in progress' (før det var den 'idle'):

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

La oss nå håndtere handlingen som sendes ved vellykket forespørsel. Her vil vi endre ikke bare statusen i staten til 'success', men også hente produktene i skiven products fra payload i handlingen. For å samle alle produktene trenger vi metoden 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)
		})
},

Ved mislykket forespørsel vil vi endre statusen til 'fail' og skrive til staten feilmeldingen:

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

Hvis vi starter applikasjonen vår nå og klikker på 'Products' i menyen, vil vi om et par sekunder (husker du forsinkelsen vi satte på serveren?) se en liste med produkter.

På samme måte vil vi se endringer i Redux DevTools. Nå vil produktene våre også vises i staten (se på fanen 'State'), hvis du klikket på handlingen products/fetchProducts/fulfilled. Den nye statusen 'success' vil også dukke opp der. Klikk nå på handlingen products/fetchProducts/pending og se hva som nå er annerledes på fanen 'State'.

Det eneste ubehagelige øyeblikket som kan skje med deg (jeg snakket om dette i forrige leksjon) - er duplisering av dataforespørsel. Som et resultat vil vi i listen ikke få 8, men hele 16 produkter og kritiske advarsler i utviklerkonsollen. La oss finne ut av dette i neste leksjon.

Åpne studentapplikasjonen din. Åpne filen studentsSlice.js i den. I kroppen av funksjonen createSlice, etter egenskapen reducers, legg til egenskapen extraReducers. Send builder til metoden extraReducers.

Bruk metoden builder.addCase til å legge til håndtering for handlingene pending, fulfilled og rejected, som sendes av fetchStudents ved forespørsel av data, som vist i leksjonen.