Редюсери в Redux

В предишния урок ние с помощта на функцията createSlice създадохме slice за продуктите products и редюсър, който ще актуализира този slice, съхраняван в store. Още веднъж напомням, че в Redux данните на състоянието се променят с помощта на редюсери.

Трябва да помним, че върху редюсерите се налагат редица ограничения. Редюсърът актуализира състоянието само въз основа на получените стойности на текущото състояние и обекта action, и след това решава как да промени състоянието и връща новата му стойност.

Знаем, че по подразбиране обектите и масивите в JavaScript са мутабилни (променими). Също така знаем, че не трябва да променяме state директно, в такъв случай трябва да работим само с копия. На това правило трябва да се подчинява и редюсърът. Но писането на такава логика ръчно може да бъде доста уморително и сложно занятие, и тук на помощ идва функцията createSlice, която използва библиотеката Immer, преобразуваща вашия 'мутабелен' код в 'немутабелен'. По този начин, да грешим и да опростяваме живота можем само при използване на функциите createSlice или createReducer.

В ограниченията на редюсъра влиза също използването на асинхронна логика, изчисляване на случайни стойности и изпълнение на други "странични ефекти". А сега, след като се запознахме по-отблизо с редюсъра, да се върнем към нашето приложение с продукти.

В нашето приложение има store, който създадохме в предишните уроци, но засега в него няма нищо. Нека отворим нашия файл store.js и да добавим малко код в него. Като начало нека импортираме в него функцията reducer за продукти:

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

Сега като редюсър можем да посочим импортираната функция productsReducer:

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

С горния ред казваме на нашия store, че сега при възникване на action всички данни за slice state.products ще бъдат актуализирани от редюсъра productsReducer.

Сега можете да стартирате приложението (забележете, че в конзолата изчезна предупреждението за невалиден редюсър!), да отворите Redux DevTools в браузъра и да поразгледате разделите му. Например, като кликнете върху раздела State в раздела Inspector можем да видим двата ни обекта с продукти, които се изведоха като начална стойност на състоянието при първото стартиране на приложението. В раздела Log monitor виждаме какви slice-ове има в себе си глобалното състояние - това е slice products, включващ два обекта. Също така погледнете в раздела Chart.

Отворете вашето приложение със студенти и променете кода на файла store.js, както е показано в урока.

Стартирайте в браузъра вашето приложение и разгледайте разделите на разширението Redux DevTools.