elyor.dev

3. setState - bu funksiya state'ni update qilishlik uchun, funksiya bir necha turli xil formatdagi parameterlar qabul qila olgani uchun ichida tekshiruvlar soni ko'proq, lekin baribir asosiy ishi stateni yangilash. Stateni yangilashdan oldin Object.is() bilan tekshiruv ham bor, agar state qiymatlari o'zgarmagan bo'lsa stateni yangilab ortiqcha hisob-kitob qilmaslik uchun.

Note: Object.is({}, {}) // false

Xullas agar set qilinganda uzatilgan state bilan bizdagi state teng (shallow equal) bo'lmasa, stateni yangilaymiz, va state yangilangani haqida hamma subscriberlarni xabardor qilishlik uchun listeners'dagi har bir funksiyani chaqirib chiqamiz.

4. getState - state'ni qaytaruvchi funksiya, store.getState() qilsak, barcha actionlar, va ayni hozirgi paytda actual bo'lgan data'ni olamiz.

5. subscribe - store o'zgarishiga "подписка" qilish uchun
Misol uchun sahifada todolar sonini ko'rsatishimiz kerak:

todoListStore.subscribe((state, prevState) => {
todoListCounterDiv.innerHTML = state.todos.length
})

subscribe funksiyasi unsubscribe qilishlik uchun funksiya ham qaytaradi, masalan todolar sahifasidan boshqa sahifaga o'tish oldidan:

const unsubscribeTodoList = todoListStore.subscribe((state, prevState) => {
todoListCounterDiv.innerHTML = state.todos.length
})

unsubscribeTodoList()
window.location.pathname = '/other-page'

#zustand #source_code

@elyor_dev

Zustand

Va'da berganimdek zustand'ning aynan core qismini qisqa "обзор"i haqida post. (React uchun binding qismi boshqa safarga qoldi)

Zustand'dagi asosiy funksiya bu rasmdagi createStoreImpl funksiyasi.

Xo'sh uni ichida ishlatilayotgan variable va functionlarni rasmda raqamlab chiqdim. (destroyni qoldirdim, u deprecated bo'lgani uchun)

Birma-bir ko'rib chiqamiz

1. state - bizga kerakli data va actionlar aynan shu variableda joylashadi.
Oxiridan bitta qator yuqoridagi
state = createState(setState, getState, api)
ushbu code biz store create qilayotganimizda uzatib yuboradigan callback'ni chaqirib natijasini state'ga yozib qo'ymoqda, ya'ni initial state va actionlarni.

2. listeners - bu biz tartib bo'yicha 5-da turgan subscribe funksiyasiga uzatib yuboradigan callbacklarimizni saqlovchi variable. (Set haqida bilmasanggiz).

mobx-flux yoki zustand

Бугун насиб бўлса, zustand source code'ларининг бир қисмини "обзор" қилиб пост ёзмоқчиман. Яъни у ўзи нима устига қурилган ва қанақа ишлайди.

Бундай постдан мақсад, яқинда redux-toolkit синтаксиси билан бир ҳил mobx-flux пакетни ёзган эдим. Zustand'нинг ҳам source code'лари mobx-flux'га жуда ўхшаш экан.

Балким солиштирма пост ҳам бўлар, кейинчалик.

Ҳозир эса ухлаш керак)

#mobx_flux #zustand

@elyor_dev

#zustand #effector #battle


Бугун zustand билан effector ни "боевой проект" да солиштириб кўрдим. Проект тўлиқ эффекторда ёзилганди, сахифалар ҳам кўп, яъни ўртача катталикдаги проект деса ҳам бўлади. Стейтлар effector'да ёзилган. Ўшани zustand га алиштирдим. Натижада bundle size 12KB га қисқарди 😵‍💫.

12KB менимча катта натижа эмас. Кутилган натижани олмадик😁.

Zustand'нинг feature'лари ҳам effector'га нисбатан камроқ экан. Лекин redux'дан қулайроқ.

Ҳа айтганча сторлар билан ишлашда ҳам ҳеч бўлмаса функция фабрика ишлатиш керак экан. Мени вазиятимдаги каби state manager'ни ўзгартириш таски келса тезда ўзгартириб чиқиш имкони бўлади.

P. S. Бизда айнан функция фабрика ишлатилган, шунга ўша функция ўзигина қайта ёздим ҳолос. Ташқарига стор ва action'лар берилади, яъни компонент ичида у стор effector'га тегишлими ёки zustand'га буни аҳамияти қолмайди. Қолган баъзи жойларни,масалан useStore каби импортларни webstorm билан replace all қилиб қўя қолдим.

P. S. S. Ишхонада effector ишлатамиз, ҳар ҳолда ҳозирча, келажакда zustand'га ўтиш эхтимоли бор. Team lead'лар хоҳиши(

@elyor_dev

Бугун zustand ни реаль проект учун ишлатиб кўрдим. Ўша гап, туфта экан(

@elyor_dev

#intro

O'sha kun keldi, blog yuritishga qaror qildim. Bu yerda frontend bo'yicha, umuman IT bo'yicha bilganlarimni, o'rganyotganlarimni yozib borishga harakat qilaman. Shaxsiy fikrlarni hammasi ham to'g'ri bo'lmasligi mumkin, ishonib qolishlik shart emas.

Mobx top, Redux tufta ekanligi to'g'ri lekin!

Yaqinlar bilan ulashib qo'ysanggiz xursand bo'laman!

@elyor_dev

Bismillah!

Channel created