Редјусери у 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.