Dodatečné reducery v Reduxu

Otevřeme naši aplikaci s produkty, a v ní soubor productsSlice.js. Pravděpodobně jste si všimli, že jsme thunk fetchProducts vytvářeli jako samostatnou funkci? Udělali jsme to proto, že createSlice nepodporuje definici thunks. Jak v tomto případě donutíme reducer slice products reagovat na akce, které jsou definovány mimo products? Vždyť právě potřebujeme zpracovat akce, které posílá thunk fetchProducts.

Pro takové případy má createSlice vlastnost extraReducers, která umožňuje přidávat dodatečné reducery, které naopak budou zpracovávat akce, definované ne v tomto slicu.

Nyní v těle funkce createSlice po vlastnosti reducers se všemi reducery přidejme ještě jednu metodu extraReducers:

extraReducers() {},

Této metodě musíme předat objekt builder, který má metody, pomocí kterých lze přidat dodatečné reducery:

extraReducers(builder) {},

Budeme používat jednu z metod builder - addCase, která jako první parametr přijímá action creator, a jako druhý reducer. Jedna z akcí, kterou nám bude posílat fetchProducts při požadavku je fetchProducts.pending, což nám říká, že požadavek byl odeslán. V tomto případě změňme status na 'in progress' (předtím byl 'idle'):

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

Nyní zpracujme akci, která se odešle v případě úspěšného požadavku. Zde budeme měnit nejen status ve stavu na 'success', ale také vezmeme produkty v slice products z payload akce. K tomu, abychom shromáždili všechny produkty, budeme potřebovat metodu 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)
		})
},

V případě neúspěšného požadavku změníme status na 'fail' a zapíšeme do stavu zprávu o chybě:

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

Pokud nyní spustíme naši aplikaci a v menu klikneme na 'Products', tak za pár sekund (pamatujete na zpoždění, které jsme nastavili na serveru?) uvidíme seznam s produkty.

Stejně tak uvidíme změny i v Redux DevTools. Nyní se naše produkty objeví i ve stavu (podívejte se na záložku 'State'), pokud jste klikli na akci products/fetchProducts/fulfilled. Zároveň se tam objeví i nový status 'success'. Nyní klikněte na akci products/fetchProducts/pending a podívejte se, čím se nyní liší záložka 'State'.

Jediný nepříjemný moment, který vás může potkat (mluvil jsem o tom v předchozí lekci) - je duplikování požadavku na data. V důsledku čehož, u nás v seznamu nebude 8, ale celých 16 produktů a kritická varování v konzoli vývojáře. Pojďme se tím zabývat v příští lekci.

Otevřete vaši aplikaci se studenty. Otevřete v ní soubor studentsSlice.js. V těle funkce createSlice po vlastnosti reducers přidejte vlastnost extraReducers. Předejte metodě extraReducers builder.

Pomocí metody builder.addCase přidejte zpracování pro akce pending, fulfilled a rejected, které odesílá fetchStudents při požadavku dat, jak je ukázáno v lekci.