Reducer și action în Redux

În lecția precedentă am terminat formularul pentru adăugarea produsului și l-am afișat pe pagina principală. Dar datele adăugate nu se salvează încă, cu alte cuvinte noul produs nu se adaugă la cele existente în store. Să reparăm acest lucru.

Pentru început, în aplicația noastră cu produse deschidem fișierul productsSlice.jsx și scriem în proprietatea reducer pentru createSlice funcția productAdded, care se va ocupa cu adăugarea produsului în store pe baza datelor transmise: starea curentă și acțiunea. Trebuie menționat că aici nu ni se transmite întregul state, ci doar acea parte care răspunde de produse (slice-ul products știe doar despre ea). Obiectul cu noul produs va fi în proprietatea payload a obiectului action, care va fi generat de manipulatorul la apăsarea butonului de salvare în formular. Ca rezultat, reducer-ul productAdded va arăta în codul createSlice astfel:

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

Și cum rămâne cu action? La începutul tutorialului am menționat că action este un eveniment, reprezentat ca un obiect, care descrie ce s-a întâmplat în aplicație. Am vorbit și despre faptul că putem folosi funcția action creator, care va crea un astfel de obiect pentru noi, de exemplu astfel:

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

Vestea bună este că nu trebuie să facem nimic, iar acest lucru va fi făcut pentru noi de funcția createSlice pe care o folosim. De îndată ce am scris reducer-ul, ea va crea automat pentru noi action creator cu același nume. Nouă ne rămâne doar să exportăm action creator-ul obținut pentru utilizarea ulterioară în componente. Să facem acest lucru la sfârșitul fișierului înainte de exportarea reducer-ului, astfel:

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

Deschideți aplicația voastră cu studenți, apoi fișierul studentsSlice.jsx, completați valoarea câmpului reducer pentru createSlice, așa cum este arătat în lecție.

Adăugați la sfârșitul fișierului studentsSlice.jsx exportul funcției action creator obținute.