Припрема података за објекат action у Redux-у

Недавно смо причали о томе да функција createSlice очекује један аргумент приликом креирања action.payload. С једне стране, то упрошћава њену употребу, са друге стране може захтевати додатне кораке за припрему садржаја објекта action.

Отворимо нашу апликацију са производима, а у њој фајл NewProductForm.jsx. Обратите пажњу на следећу линију кода:

dispatch(productAdded({
	id: nanoid(), name, desc, price, amount
}))

Овде састављамо payload објекат директно у React компоненти и преносимо га у акцију productAdded. А шта ако нам буде потребно да шаљемо исту акцију из више компоненти или ако логика за састављање постане сложена? У принципу, нашој компоненти би требало да буде свеједно како изгледа објекат у payload за ову акцију. Такође нас не задовољава константно понављање кода.

Ове проблеме нам поново може помоћи да реши наш чувени createSlice, јер приликом писања редјусера он нам дозвољава да користимо callback-функцију prepare, у којој можемо писати различиту логику, генерисати случајне бројеве и слично. У таквом случају вредност за поље редјусера може бити представљена у виду следећег објекта:

{reducer, prepare}

Отворимо наш фајл productsSlice.js и променимо код за редјусер productAdded. Сада овај део кода:

productAdded(state, action) {
	state.push(action.payload)
},

Променићемо у следећи, у коме ће се функција reducer бавити ажурирањем стања у store-у, а prepare - враћати објекат payload са генерисан id-ем и осталим нашим подацима:

productAdded: {
	reducer(state, action) {
		state.push(action.payload)
	},
	prepare(name, desc, price, amount) {
		return {
			payload: {
				id: nanoid(),
				name,
				desc,
				price,
				amount,
			},
		}
	},
},

Пошто ћемо сада генерисати id овде, а не у компоненти, додајмо nanoid у импорт:

import { createSlice, nanoid } from '@reduxjs/toolkit'

На крају, унесимо измене у NewProductForm.jsx. Уместо линије:

dispatch(productAdded({
	id: nanoid(), name, desc, price, amount
}))

Имаћемо овакву, у којој ћемо једноставно преко зареза пренети потребне нам податке (не заборавите у овом фајлу да уклоните nanoid из импорта):

dispatch(productAdded(name, desc, price, amount))

Покренимо апликацију, затим креирајмо нови производ и уверимо се да ништа нисмо покварили.

Отворите вашу апликацију са студентима. У фајлу StudentsSlice.js препишите ваш редјусер studentAdded на такав начин, да буде у виду објекта {reducer, prepare}, као што је приказано у лекцији.

Унесите одговарајуће измене у фајл NewStudentForm.jsx, као што је приказано у лекцији. Покрените апликацију и уверите се да све ради као и пре.