Рэдьюсеры ў 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.