Redukserio pridėjimas į Redux programą

Ankstesnėje pamokoje mes sukūrėme komponentą UserReaction tam, kad kiekvienas produktas turėtų ir naudotojų reakcijas. Dabar mums reikia parašyti redukserį, kuris apdoros skaitliuką reakcijų paspaudus naudotojui mygtuką tos ar kitos reakcijos.

Atidarykime mūsų programą su produktais, o joje failą productsSlice.js su visais redukseriais. Dabar savybėje reducers sukurkime dar vieną redukserį reactionClicked (galime jį padėti pirmą - prieš productAdded, nors tai nesvarbu). Kaip įprasta, perduokime jam parametrais state ir action:

reactionClicked(state, action) {},

O dabar viduje riestinių skliaustų, kuriuos mes palikome tuščius ankstesniame žingsnyje, parašykime jam kodą. Pirmiausia išskirsime produkto id iš payload objekto action ir reakcijos pavadinimą:

const { productId, reaction } = action.payload

Tada iš perduotos būsenos gausime reikiamą produktą:

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

Ir jei toks produktas yra, padidinsime perduotos reakcijos reikšmę 1:

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

Štai ir viskas, mūsų kodas reactionClicked paruoštas:

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

Failo pabaigoje pridėkime eksportą gauto veiksmo kūrėjo:

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

Čia būtina pažymėti du svarbius momentus. Kaip jūs prisimenate iš ankstesnių pamokų - atnaujinti taip tiesiogiai reikšmę redukserio kode negalima (pažiūrėkite į šią eilutę: reactions[reaction]++), bet mums tai praeis, nes tai darome viduje createSlice, kuris naudoja Immer biblioteką. Ji ir pasirūpins, kad perkurtų mūsų kodą į "saugų" reikšmės atnaujinimą. Tai leidžia mums rašyti sudėtingus dalykus paprastesniu būdu.

Kitas dalykas, kurį reikia atsiminti - objektas action turi turėti minimaliai įmanomą informacijos kiekį - tik tiek, kad nurodytų kas atsitiko. Jame nereikia daryti jokių skaičiavimų. Visi skaičiavimai būsenos atnaujinimui turi būti daromi redukseryje, čia galima tam parašyti tiek logikos, kiek prireiks.

Atidarykite savo programą su studentais ir faile studentsSlice.js pridėkite dar vieną redukserį voteClicked į lauką reducers, kaip parodyta pamokoje. Parašykite kodą jam. Jūsų redukserio užduotis - paspaudus padidinti reikšmę vote (arba balsą), kurį paspaudė, tam studentui, 1.

Failo pabaigoje nepamirškite eksportuoti gauto veiksmo kūrėjo voteClicked.