Redux даги редьюсерлар

Ўтган дарсда биз функция ёрдамида createSlice маҳсулотлар учун слайс products ва store да сақланадиган бу слайсни янгилайдиган редьюсер яратдик. Яна бир бор эслатиб ўтай, Redux да стейт маълумотлари редьюсерлар ёрдамида ўзгартирилади.

Эсда тутингки, редьюсерларга бир нечта чекловлар қўйилган. Редьюсер фақатгина олинган қийматлар - жорий стейт ва action объекти асосидагина стейтни янгилайди, сўнгра стейтни қандай ўзгартиришни ҳал қилиб, унинг янги қийматини қайтаради.

Биз JavaScript да объект ва массивлар сунгги учун мутабель (ўзгартирилиши мумкин) эканини биламиз. Шунингдек, биз state ни тўғридан-тўғри ўзгартириб бўлмайди, бундай ҳолда фақат нусхалар билан ишлаш кереклигини биламиз. Редьюсер ҳам ўша қоидага бўйинсуши керак. Аммо бундай мантиқни қўлда ёзиш жуда ҳам чарчатиш ва қийин иш бўлиши мумкин, ва ўша ерда createSlice функцияси ёрдамга келади, у Immer кутубхонасидан фойдаланади, сизнинг 'мутабел' кодингизни 'номутабел' га айлантиради. Шу сабабли, гуноҳ қилиш ва ҳаётни соддалаштириш фақат createSlice ёки createReducer функцияларини ишлатгандагина мумкин.

Редьюсернинг чекловларига асинхрон мантиқни ишлатиш, тасодифий қийматларни ҳисоблаш ва бошқа "yon ta'sirlar" ни бажариш ҳам киради. Энди, редьюсер билан яқиндан танишганимиздан сўнг, маҳсулотлар билан ишлаётган иловамизга қайтамиз.

Иловамизда ўтган дарсларда яратган store мавжуд, аммо ҳозирча унда ҳеч нарса йўқ. Келинг, store.js файлимизни очайлик ва унга озгина код қўшайлик. Бошлаш учун унга маҳсулотлар учун reducer функциясини импорт қиламиз:

import productsReducer from '../parts/products/productsSlice'

Энди биз редьюсер сифатида импорт қилинган productsReducer функциясини кўрсатишимиз мумкин:

export default configureStore({
	reducer: {
		products: productsReducer
	}
})

Юқоридаги сатр бизнинг store га дейдики, энди action пайдо бўлганда state.products слайси учун барча маълумотлар productsReducer редьюсери томонидан янгиланади.

Энди сиз иловани ишга туширишингиз мумкин (эътибор беринг, консолда нотўғри редьюсер ҳақидаги огоҳлантириш йўқолди!), браузерда Redux DevTools ни очинг ва унинг варақлари атрофида қзиб кўринг. Масалан, Inspector даги State варақчасини босганда, биз иловани биринчи марта ишга туширганда стейтнинг бошланғич қиймати сифатида чиқип кетган иккита маҳсулот объектини кўришимиз мумкин. Log monitor варақчасида биз глобал стейтнинг қандай слайсларга эга эканини кўрамиз - бу products слайси, иккита объектни ўз ичига олган. Шунингдек, Chart варақчасига ҳам назар солинг.

Ўқувчилар билан ишлаётганингиз иловани очинг ва store.js файли кодини дарсда кўрсатилганидек ўзгартиринг.

Браузерда иловангизни ишга туширинг ва Redux DevTools кенгайтмасининг варақлари атрофида қзиб кўринг.