Reducers katika Redux

Katika somo lililopita tulitumia kitendakazi createSlice kuunda kipande cha bidhaa products na reducer ambayo itasasisha kipande hiki kinachohifadhiwa kwenye duka. Nakukumbusha tena, kwamba katika Redux data ya hali inabadilishwa kwa kutumia reducers.

Ni muhimu kukumbuka, kwamba reducers vinawekewa vikwazo kadhaa. Reducer inasasisha hali kulingana tu na maadili yaliyopokelewa ya hali ya sasa na kitu cha action, kisha huamua, jinsi ya kubadilisha hali na kurudisha thamani yake mpya.

Tunajua kuwa kwa default vitu na arrays katika JavaScript zinaweza kubadilika (zinabadilika). Pia tunajua kuwa kubadilisha hali moja kwa moja haiwezekani, katika kesi hii inapaswa kufanyia kazi tu na nakala. Kanuni hii inapaswa kutiiwa na reducer pia. Lakini kuandika mantiki kama hii kwa mikono inaweza kuwa jambo la kuchosha na gumu, na hapa ndio kitendakazi createSlice kinakuja kuokoa, ambayo hutumia maktaba ya Immer, inayobadilisha msimbo wako 'unaobadilika' kuwa 'usiobadilika'. Hivyo, kufanya makosa na kurahisisha maisha kunawezekana tu wakati wa kutumia vitendakazi createSlice au createReducer.

Miongoni mwa vikwazo vya reducer pia kuna matumizi ya mantiki ya asynchronous, ukokotoaji wa maadili ya nasibu na utekelezaji wa athari zingine "za upande". Na sasa, baada ya kukutana na reducer kwa karibu, turudi kwenye programu yetu ya bidhaa.

Kwenye programu yetu kuna duka, ambayo tuliunda katika masomo yaliyopita, lakini kwa sasa hakuna chochote ndani yake. Wacha tufungue faili yetu store.js na tuongeze msimbo kidogo ndani yake. Kwanza tuingize kitendakazi cha reducer kwa bidhaa:

Sasa kama reducer tunaweza kubainisha kitendakazi kilichoingizwa productsReducer:

Kwa mstari ulioonyeshwa hapo juu tunawaambia duka letu, kwamba sasa wakati action itatokea data yote ya kipande state.products itakuwa inasasishwa na reducer productsReducer.

Sasa unaweza kuzindua programu (angalia, kwamba kwenye konsoli onyo la reducer batili limetoweka!), kufungua Redux DevTools kwenye kivinjari na kuvua-pitia vilango vyake. Kwa mfano, kubonyeza kwenye kilango cha State kwenye kilango cha Inspector tunaweza kuona vitu vyetu viwili vya bidhaa, ambavyo vilionyeshwa kama thamani ya kwanza ya hili wakati programu ilianzishwa kwa mara ya kwanza. Kwenye kilango cha Log monitor tunaona ni vipande gani ndani ya hali ya kimataifa - hii ni kipande products, kinajumuisha vitu viwili. Pia angalia kwenye kilango cha Chart.