Подготовка на податоци за објектот 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, како што е прикажано во лекцијата. Стартувајте ја апликацијата и убедете се, дека сè работи како порано.