Die byvoeging van 'n reducer in 'n Redux aansoek

In die vorige les het ons die komponent UserReaction geskep sodat elke produk ook gebruikersreaksies kan hê. Nou moet ons 'n reducer skryf wat die reaksieteller sal hanteer wanneer die gebruiker op 'n knoppie van 'n sekere reaksie klik.

Kom ons maak ons produk-aansoek oop, en daarin die lêer productsSlice.js met al die reducers. Nou sal ons in die eienskap reducers 'n ander reducer reactionClicked skep (ons kan dit eerste plaas - voor productAdded, al maak dit nie saak nie). Soos gewoonlik, gee ons die parameters state en action daaraan:

reactionClicked(state, action) {},

En nou, binne die krulhakies wat ons leeg gelaat het in die vorige stap, skryf ons die kode daarvoor. Eerstens sal ons die produk se id uit die payload van die action objek onttrek en die naam van die reaksie:

const { productId, reaction } = action.payload

Daarna sal ons die nodige produk uit die oorhandigde staat kry:

const currentProduct = state.find(product => product.id === productId)

En as so 'n produk bestaan, sal ons die waarde van die oorgehandigde reaksie met 1 verhoog:

if (currentProduct) {
	currentProduct.reactions[reaction]++
}

Dit is alles, ons kode vir reactionClicked is gereed:

reactionClicked(state, action) {
	const { productId, reaction } = action.payload
	const currentProduct = state.find(product => product.id === productId)
	if (currentProduct) {
		currentProduct.reactions[reaction]++
	}
},

Kom ons voeg aan die einde van die lêer die eksport van die verkrygte action creator by:

export const {
	reactionClicked,
	productAdded,
	productUpdated
} = productsSlice.actions

Hier is dit nodig om twee belangrike punte te noem. Soos jy onthou uit vorige lesse - dit is verbode om die waarde direk so in die reducer se kode op te dateer (kyk na hierdie lyn: reactions[reaction]++), maar ons sal hiermee wegkom, want ons doen dit binne createSlice, wat die Immer biblioteek gebruik. Dit sal sorg dat ons kode in 'n "veilige" opdatering van die waarde omskep word. Dit laat ons toe om komplekse dinge op 'n makliker manier te skryf.

Die volgende ding om te onthou - die objek action moet die minimum moontlike hoeveelheid inligting bevat - net genoeg om aan te dui wat gebeur het. Moet nie daarin enige berekeninge doen nie. Alle berekeninge vir die opdatering van die staat moet in die reducer gedoen word, hier kan jy soveel logika daarvoor skryf as wat nodig is.

Maak jou studente-aansoek oop en voeg in die lêer studentsSlice.js 'n ander reducer voteClicked by in die veld reducers, soos in die les gewys. Skryf die kode daarvoor. Die taak van jou reducer is - wanneer daar geklik word, moet die waarde van vote (of stem), waarop geklik is, vir daardie student, met 1 verhoog word.

Aan die einde van die lêer moet jy nie vergeet om die verkrygte action creator voteClicked te eksporteer nie.