Редуктори во Redux

На претходната лекција ние со помош на функцијата createSlice создадовме слајс за продукти products и редуктор кој ќе го ажурира овој слајс, складиран во 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 сите податоци за слајсот state.products ќе бидат ажурирани од редукторот productsReducer.

Сега можете да ја пуштите апликацијата (забележете, дека во конзолата исчезна предупредувањето за невалиден редуктор!), да ги отворите Redux DevTools во прелистувачот и да ги истражите неговите јазичиња. На пример, со кликнување на јазичето State во јазичето Inspector може да ги видите нашите два објекти со продукти, кои се прикажаа како почетна вредност на состојбата при првото пуштање на апликацијата. На јазичето Log monitor гледаме какви слајсови има во себе глобалната состојба - тоа е слајсот products, кој вклучува два објекти. Исто така погледнете го јазичето Chart.

Отворете ја вашата апликација со студенти и променете го кодот на фајлот store.js, како што е прикажано во лекцијата.

Пуштете ја во прелистувачот вашата апликација и истражете ги јазичињата на додатокот Redux DevTools.