Redux-daky action obyekti üçin maglumatlary taýýarlamak

Ýakynda siz bilen createSlice funksiýasynyň action.payload döredilende bir argument garaýandygyny gürleşdik. Bir tarapdan bu onuň ulanylyşyny ýönekeýleşdirýär, beýleki tarapdan bolsa action obyektiniň mazmunyny taýýarlamak üçin goşmaça hereketler talap edip biler.

Geliň önümler bar bolan programmyzy açalyň, we onuň içindäki NewProductForm.jsx faýlyna geçeliň. Aşakdaky kod setirine üns beriň:

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

Bu ýerde biz payload obyektini derrew React komponentinde ýygnaýarys we ony productAdded aksiýasyna geçirýäris. Emma birnäçe komponentden şonuň ýaly aksiýa ibermeli bolup galýan bolsa ýa-da ýygnaýyş logikamyz kyn bolsa näme etmeli? Ideýa taýdan, komponentimiz bu action üçin payload-da näme ýerleşýändigi bilen alakah bolmaly däldir. Mundan başga-da, kody yzygiderlik gaýtalamak bizi kanagatlandyrmaýar.

Bu meseläni ýene-de ataýyňly createSlice çözüp biler, sebäbi reducer ýazýanymyzda oňa prepare kallback-funksiýasyny ulanmaga rugsat berýär, onda dürli logikalar ýazyp, tötänleýin sanlar döredip we ş.m. ýerine ýetirip bolýar. Bu ýagdaýda reducer meýdany üçin baha aşakdaky ýaly obyekt şeklinde görkezilip bilner:

{reducer, prepare}

Geliň productsSlice.js faýlymyzy açalyň we productAdded reducer üçin kody üýtgedeliň. Indi bu kod bölegi:

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

Biz ony aşakdaky bilen çalyşarys, ýöne reducer funksiýasy store-daky ýagdaýy täzelemek bilen meşgullanjak, prepare bolsa - döredilen id we beýleki maglumatlarymyz bilen payload obyektini yzyna gaýtarmaly:

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

Indi biz id-ni komponentde däl-de, bu ýerde döredýändigimiz üçin, geliň nanoid-i importa goşalyň:

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

Soňky üýtgeşmäni NewProductForm.jsx faýlyna edeliň. Şu setiriň ýerine:

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

Bizde bu bolup galar, onda biz diňe zerur bolan maglumatlarymyzy vergül bilen geçirýäris (bu faýlda importdan nanoid-i aýyrmagy ýatdan çykarmaň):

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

Programmany işledeliň, soňra täze önüm döredeliň we hiç zatymyzyň bozulmandygyna göz ýetireliň.

Talyp bar bolan programmyzy açyň. StudentsSlice.js faýlynda studentAdded reducer-iňizi sapakda görkezilişi ýaly {reducer, prepare} obyekti şeklinde ýazyň.

Sapakda görkezilişi ýaly, NewStudentForm.jsx faýlyna degişli üýtgeşmeleri giriziň. Programmany işlediň we öňki ýaly işleýändigine göz ýetiriň.