Reducers un action Redux

Iepriekšējā nodarbībā mēs pabeidzām formas veidni produkta pievienošanai un izvadījām to galvenajā lapā. Bet pagaidām pievienotie dati netiek saglabāti, citiem vārdiem sakot, jaunais produkts netiek pievienots esošajiem store. Izlabosim to.

Vispirms mūsu produktu lietotnē mēs atvērsim failu productsSlice.jsx un ierakstīsim īpašumā reducer priekš createSlice funkciju productAdded, kas nodarbosies ar produkta pievienošanu store, balstoties uz tai nodoto pašreizējo stāvokli un darbību. Jāatzīmē, ka šeit mums tiek nodots ne viss state, bet tikai tā daļa, kas atbild par produktiem (slīds products zina tikai par to). Objekts ar jauno produktu būs īpašumā payload objekta action, kas tiks ģenerēts apstrādātājprogrammā, nospiežot saglabāšanas pogu formā. Rezultātā reducers productAdded izskatīsies kodā createSlice šādi:

const productsSlice = createSlice({
	name: 'products',
	initialState,
	reducers: {
		productAdded(state, action) {
			state.push(action.payload)
		},
	},
})

Kā ir ar action? Pašā mācību grāmatas sākumā mēs minējām, ka action - tas ir kāds notikums, kas attēlots kā objekts, kas apraksta to, kas noticis lietotnē. Mēs runājām arī par to, ka var izmantot funkciju action creator, kas mums izveidos tādu objektu, piemēram, šādi:

const addProduct = newProduct => {
	return {
		type: 'products/productAdded',
		payload: newProduct
	}
}

Labā ziņa ir tā, ka mums nekas nav jādara, to visu mūsu vietā paveiks funkcija createSlice, ko mēs izmantojam. Tiklīdz mēs esam uzrakstījuši reducer, tā automātiski mums izveidos action creator ar tādu pašu nosaukumu. Mums tikai jāeksportē iegūtais action creator tālākai lietošanai komponentos. Darīsim to faila beigās pirms reducera eksporta, šādi:

export const { productAdded } = productsSlice.actions
export default productsSlice.reducer

Atveriet savu studentu lietotni, tad failu studentsSlice.jsx, papildiniet lauka reducer vērtību priekš createSlice, kā parādīts nodarbībā.

Pievienojiet faila studentsSlice.jsx beigās iegūtās funkcijas action creator eksportu.