Дадаванне рэдʼюсара ў Redux прыкладанне

У мінулым уроке мы стварылі кампанент UserReaction для таго, каб у кожнага прадукту былі яшчэ і рэакцыі карыстальнікаў. Цяпер нам трэба напісаць рэдʼюсер, які будзе апрацоўваць лічыльнік рэакцый пры кліку карыстальнікам па кнопцы той ці іншай рэакцыі.

Давайце адкрыем наша прыкладанне з прадуктамі, а ў ім файл productsSlice.js з усімі рэдʼюсерамі. Цяпер у ўласцівасці reducers створым яшчэ адзін рэдʼюсер reactionClicked (можам паставіць яго першым - перад productAdded, хоць гэта без розніцы). Як звычайна, перададзім яму параметрамі state і action:

reactionClicked(state, action) {},

А цяпер унутры фігурных дужак, якія мы пакінулі пустымі на папярэднім кроку, напішам для яго код. Па-першае мы здабудзем id прадукту з payload абʼекта action і назву рэакцыі:

const { productId, reaction } = action.payload

Затым з перададзенага стэйту атрымаем патрэбны прадукт:

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

І калі такі прадукт маецца, то павялічым значэнне перададзенай рэакцыі на 1:

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

Вось і ўсё, наш код для reactionClicked гатовы:

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

Давайце ў канцы файла дадамо экспарт атрыманага action creator:

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

Тут неабходна адзначыць два важныя моманты. Як вы памятаеце з папярэдніх урокаў - абнаўляць вось так напрамую значэнне ў кодзе рэдʼюсара нельга (паглядзіце на гэты радок: reactions[reaction]++), але нам сойдзе гэта з рук, таму што мы гэта робім унутры createSlice, які выкарыстоўвае бібліятэку Immer. Яна і паклапоціцца пра тое, каб перарабіць наш код у "бяспечнае" абнаўленне значэння. Гэта дазваляе нам пісаць складаныя рэчы больш простым спосабам.

Наступнае, што неабходна памятаць - абʼект action павінен змяшчаць мінімальна магчымая колькасць інфармацыі - толькі для таго каб паказаць што адбылося. Не варта рабіць у ім якія-небудзь вылічэнні. Усе вылічэнні для абнаўлення стэйту варта рабіць у рэдʼюсары, тут можна напісаць для гэтага столькі логікі, колькі патрабуецца.

Адкрыйце ваша прыкладанне са студэнтамі і ў файле studentsSlice.js дадайце яшчэ адзін рэдʼюсер voteClicked у поле reducers, як паказана ў уроку. Напішыце код для яго. Задача вашага рэдʼюсара - пры кліку павялічваць значэнне vote (ці голасу), па якому клікнулі, для дадзенага студэнта, на 1.

У канцы файла не забыйцеся экспартаваць атрыманы action creator voteClicked.