Redux-da Redýuserler

Öňki sapakda biz funksiýa createSlice kömegi bilen önümler üçin products ady bilen slays döretdik we store-da saklanýan bu slaysy täzeläp durjak redýuseri döretdik. Ýene bir gezek ýatladýaryn, Redux-da döwlet maglumatlary redýuserler üsti bilen üýtgedilýär.

Redýuserlere birnäçe çäklendirme goýulýandygyny ýatda saklamaly. Redýuser döwleti diňe alnan häzirki döwlet we action obýektiniň bahalary esasynda täzeläp, soňra döwleti nähili üýtgetmelidigini çözüp, onuň täze bahasyny yzyna gaýtaryp bermeli.

Biz bilýäris, deslapda JavaScript-däki obýektler we massiwler mutabel (üýtgedilip bolýan). Şeýle hem biz bilýäris, state-i gönüden-göni üýtgetmek bolmaýar, şeý ýagdaýda diňe göçürmeler bilen işlemeli. Bu düzgüne redýuser hem boýun bolmaly. Emma el bilen şeýdaky logikany ýazmak juda ýadaw we kyn iş bolup biler, we bu ýerde createSlice funksiýasy kömäge gelýär, ýöne bu funksiýa Immer kitaphanasyny ulanýar, siziň 'mutabel' kodyňyzy 'non-mutabel' görnüşine öwürýär. Şeýlelik bilen, günäkär bolup we durmuşy ýöneleşdirmek diňe funksiýalary ulananyňyzda mümkin bolýar createSlice ýa-da createReducer.

Redýuseriň çäklerine şeýle hem asenkron logikany ulanmak, şansa bagly bahalary hasaplamak we beýleki "gapdal effektler" ýerine ýetirmek girýär. Indi bolsa, redýuser bilen ýakynndan tanyşanyňyzdan soň, öz önümler aplikasiýamyza gaýdyp gelýäris.

Aplikasiýamyzda öňki sapaklarda döreden store bar, ýöne häzirlikçe onda hiç zat ýok. Geliň store.js faýlymyzy açalyň we ona azajyk kod goşalyň. Başlangyç hökmünde oňa önümler üçin redýuser funksiýasyny import edeliň:

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

Indi redýuser hökmünde biz import edilen funksiýany görkezip bileris productsReducer:

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

Ýokarda görkezilen setir bilen biz store-a aýdýarys, indi bolsa action ýüze çykanda state.products slaysy üçin ähli maglumatlar productsReducer redýuseri tarapyndan täzelenjek.

Indi siz aplikasiýany işledip bilersiňiz (üns beriň, konsoldaky nädogry redýuser baradaky duýduryş ýogdy!), brauzerde Redux DevTools açyň we onuň wkladkalaryny gözden geçiriň. Mysal üçin, Inspector wkladkasynyň içindäki State wkladkasyna basanyňyzda biz iki sany önüm obýektimizi görüp bileris, olaryň ilkinji aplikasiýany işletmekde döwletiň başlangyç bahasy hökmünde çykaryldy. Log monitor wkladkasynda biz global döwletiň haýsy slayslara eýe dugusyny görýäris - bu products slaysy, iki obýekdi öz içine alýar. Şeýle hem Chart wkladkasyna göz aýlaň.

Şagirtler bilen bolan aplikasiýaňyzy açyň we store.js faýlyňyzdaky kody sapakda görkezilişi ýaly üýtgediň.

Brauzeriňizde aplikasiýaňyzy işledip Redux DevTools goşundysynyň wkladkalaryny gözden geçiriň.