Маълумотро барои объекти action дар Redux омода кардан

Чанде пеш мо бо шумо дар бораи он суҳбат кардем, ки функсияи createSlice як аргументро дар вақти сохтани action.payload интизор аст. Аз як тараф ин истифодаи онро осон мекунад, аз тарафи дигар метавонад талабҳои иловагиро барои омодакунии муҳтавои объекти action тақозо намояд.

Биёед барномаи худро бо маҳсулот кушода, дар он файли NewProductForm.jsx. Ба сатри зерини рамз диққат диҳед:

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

Дар ин ҷо мо payload объектро рост дар компоненти React ҷамъ оварда, онро ба action-и productAdded мефиристем. Вале агар мо бояд чунин action-ро аз якчанд компонент фиристем ё мантиқ барои ҷамъоварӣ мураккаб шавад? Дар асос, компоненти мо набояд фарқ кунад, ки объект дар payload барои ин action чӣ хел аст. Ҳамзамон, такрори доимии рамз моро розӣ намекунад.

Ин мушкилиҳоро бори дигар метавонад ба мо кӯмак расонад, ки маъруфи 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 ворид кунед, чунонки дар дарс нишон дода шуд. Барномаро оғоз кунед ва боварӣ ҳосил кунед, ки ҳама чиз ҳамон тавре кор мекунад, ки пеш.