Ytterligare reducers i Redux

Låt oss öppna vår produktapplikation, och i den filen productsSlice.js. Du har förmodligen lagt märke till att vi skapade thunken fetchProducts som en separat funktion? Vi gjorde så eftersom createSlice inte stöder definition av thunks. Hur kan vi i det här fallet få reducern i products-slice:n att svara på actions som definieras utanför products? Trots allt behöver vi bearbeta actions som skickas av thunken fetchProducts.

För sådana fall har createSlice egenskapen extraReducers, som tillåter att lägga till ytterligare reducers, som i sin tur kommer att bearbeta actions som inte definierats i denna slice.

Låt oss nu i funktionen createSlice efter egenskapen reducers med alla reducers lägga till ytterligare en metod extraReducers:

extraReducers() {},

Vi måste skicka ett objekt builder till denna metod, som har metoder för att lägga till ytterligare reducers:

extraReducers(builder) {},

Vi kommer att använda en av metoderna i builder - addCase, som tar en action creator som första parameter och en reducer som andra. En av actions som kommer att skickas av fetchProducts vid förfrågan är fetchProducts.pending, vilket talar om för oss att förfrågan har skickats. Låt oss i detta fall ändra status till 'in progress' (innan dess var den 'idle'):

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

Låt oss nu hantera action som skickas vid en lyckad förfrågan. Här kommer vi att ändra inte bara status i state till 'success', utan också hämta produkterna i slice:n products från action:s payload. För att samla alla produkter behöver 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)
		})
},

Vid en misslyckad förfrågan kommer vi att ändra status till 'fail' och skriva till state felmeddelandet:

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

Om vi startar vår applikation nu och klickar på 'Products' i menyn, så kommer vi efter ett par sekunder (kommer du ihåg fördröjningen som vi satte på servern?) att se en lista med produkter.

På samma sätt kommer vi att se förändringar i Redux DevTools. Nu kommer våra produkter att dyka upp i state (kolla fliken 'State'), om du klickade på action products/fetchProducts/fulfilled. Där kommer också den nya statusen 'success' att dyka upp. Klicka nu på action products/fetchProducts/pending och se skillnaden på fliken 'State'.

Det enda obehagliga som kan hända (jag nämnde detta i föregående lektion) - är duplicering av dataförfrågningar. Som ett resultat kommer vi i listan att få inte 8, utan hela 16 produkter och kritiska varningar i utvecklarkonsolen. Låt oss ta itu med detta i nästa lektion.

Öppna din studentapplikation. Öppna filen studentsSlice.js i den. I funktionen createSlice, efter egenskapen reducers, lägg till egenskapen extraReducers. Skicka builder till metoden extraReducers.

Med hjälp av metoden builder.addCase lägg till hantering för actions pending, fulfilled och rejected, som skickas av fetchStudents vid dataförfrågan, som visas i lektionen.