elyor.dev – Telegram
elyor.dev
292 subscribers
97 photos
3 videos
84 links
- Shaxsiy fikrlar hammasi ham to'g'ri bo'lmasligi mumkin

© Elyor Shodiyorov
Download Telegram
elyor.dev
Mobx va React Context Assalomu aleykum, bugundan mobx bo'yicha seriyali postlarni boshladim. Bugun data React + Mobx applarda data sharing (stateni tashish) yo'llaridan biri bo'lgan Mobx + Context Api'ni ko'rib chiqamiz. 1. O'zimizga kerakli storelarni…
Agar yuqoridagi holatda bizga bir store boshqa store ichida kerak bo'lib qolsa, u holda biz istalgan storega rootStore'ni berib yuborib bir store ichida boshqa store bilan ishlay olamiz.

Rasmlardagi exampleda agar TodoStore ichida currentUser kerak bo'lib qolsa, biz TodoStore ga rootStore'ni berib yuborib u orqali currentStore bilan ishlay olamiz. Ya'ni bu misollar aynan componentdan turib storelarga nimanidir set qilmaslik uchun

#mobx #root_store #linked_stores

@elyor_dev
👍21👎1🔥1
elyor.dev
Mobx va React Context Assalomu aleykum, bugundan mobx bo'yicha seriyali postlarni boshladim. Bugun data React + Mobx applarda data sharing (stateni tashish) yo'llaridan biri bo'lgan Mobx + Context Api'ni ko'rib chiqamiz. 1. O'zimizga kerakli storelarni…
Yuqoridagi holatda

1. Mobx ishlatilgan joyda context nega kerak degan savol:

Mobx va React qaralganda data transfer qilishni bir necha yo'llari bor
- Singleton storelar
- Context Api orqali
- DI containerlar (singleton'ga yaqin)

Nima uchun Context Api? Context Api react'da data transfer uchun ishlatiladigan mexanizm, masalan redux ham shundan foydalanadi, context + mobx ishlatilganda context api dagi ortiqcha rerender muammosi to'liq yo'qoladi, sababi mobx statelar mutable va ularga link o'zgarmaydi, keyin agar sizda SSR bo'lsa u holda singleton pattern o'z o'zidan kuchini yo'qotadi, yagona variant Context Api qoladi.

2. Storelarni lazy load qilsa bo'lmaydimi, hammasini bittada yig'gandan.

Agar aynan biror bir sahifa yoki moduledagina ishlatiladigan store bo'lsa sahifaga kirish oldidan rootStore'ga set qilsa bo'lar, o'zim qilib ko'rmaganman

#mobx

@elyor_dev
👍2👎1
👍2👎2🤓1
Bitta hater borda, kim ekan o'sha a?

#haterlarga_omonlik

@elyor_dev
👎8😁5
Mobx haqida seriyali postlar vada qilgandim. Bu hafta ishlar ko'payib ketdi biroz, vaqt kamroq.

Qaysi mavzular qiziq aynan mobx bo'yicha?

#mobx

@elyor_dev
Forwarded from Azimjon's Fikrlog
Leverage | Tayanch

Savdolashish san’atini o’rganing. Eng foydali qobiliyat.

11 yoshimdan uyga bozorni o’zim qilardim. Savdolashib, narxini kelishib olardim. Korzinka? Pfft, Farxadskiy!

Yuqorida Polshaga kelib 2-ishimni topganim haqida yozgandim. Ular oyiga 3.5k zł taklif berishgandi. Meni yo’qotadigan hech narsam yo’q edi, qiziqishga savdolashib ko’rdim.

16k zł ga rozi bo’lishimni aytdim, yo’q deyishlarini bilib. Ular 5k taklif qilishdi - rozi bo’lmadim, 15k so’radim. 8k ga chiqarishdi…

Axiri 14k ga kelishdik. Qanday qilib? Tayanchni ishga solib.

“Leverage” nima bo’lishi mumkin? Hozir ishlab turgan ishingiz yoki boshqa kompaniya bergan taklif. Har doim leverage/tayanch qidiring.

Eng muhimi, qadringizni biling.
👍8
Foydali vscode pluginlar.

https://habr.com/p/756782/

P. S. Webstorm top:)


@elyor_dev
👍11👎4
Mobx Funksional styleda

Assalomu aleykum, mobx bo'yicha postlarni davom ettirgan holda, bugun mobx'ni qanaqa qilib funksional styleda yozish haqida ko'rsatmoqchiman. Juda base holatda albatta.

1. Bitta yordamchi funksiya qilib olamiz, ortiqcha yozuvlarni kamaytirishlik uchun. createStore funksiya boshlang'ich qiymat qabul qiladi va uni makeAutoObservable ga o'rab qaytaradi.

2. Store create qilish

Object ichida kerakli state va actionlarni yozib createStore funksiyamizga uzatib yuborsak bo'lgani. actionlar async yoki sync ekanligini farqi yo'q, middleware kerak emas, Salom reduxchilar)).

3. Kerakli componentga import qilamiz va ishlatamiz. Tamom.

Ha aytgancha bu misollarda global store yozilgan, commentlarda local store yozib ko'rishga urunib ko'ring))

#mobx #functional_style #mobxVsFunction

@elyor_dev
👍1
elyor.dev
Mobx Funksional styleda Assalomu aleykum, mobx bo'yicha postlarni davom ettirgan holda, bugun mobx'ni qanaqa qilib funksional styleda yozish haqida ko'rsatmoqchiman. Juda base holatda albatta. 1. Bitta yordamchi funksiya qilib olamiz, ortiqcha yozuvlarni…
Local mobx store

Local mobx storelarni ishlatishlik uchun useLocalObservable hook bor, mobx-react-lite package ichida.

Yoki custom ikki qatorlik hook yozsa ham bo'ladi:

export const useLocalObservable = <TStore extends Record<string, any>>(initializer: () => TStore): TStore => {
const [store] = useState(() => makeAutoObservable(initializer(), {}, { autoBind: true }))
return store
}

So'ng uni component ichida ishlatish:

const todoList = useLocaleObservable(() => ({
todos: [] as as ITodoList[]
....
.......
}))

shunaqa qilib ishlataveramiz.

#mobx #localStore

@elyor_dev
👍2
Client-Side kiber hujumga yo'lak ochuvchi zaifliklar (уязвимость) turlari haqida ekan. Frontendchi sifatida bularni yodda tutish muhim bo'lsa kerak

https://habr.com/ru/companies/bastion/articles/757590/

@elyor_dev
👍5
Hozir mobx va nextjs'ni "do'stlashtirish" bilan ovvoraman. Biror kunda yangi package dunyoga kelar balki. Stay tuned!

Mobx top)

@elyor_dev
👍7
Tez orada mobx'da yozilgan applar yanada tezlashsa kerak.
Stay tuned)

#mobx #proxy

@elyor_dev
👍4🔥1
Mobx with react-query

Mobx va react-query integratsiyasi haqida qiziq video chiqdi. (Chatlardan birida tashlashdi). react-query ni mobx store ichida ishlatsa bo'lar ekan.

https://youtu.be/rNuIyo994OY?feature=shared

#mobx #react_query #mobx_top

@elyor_dev
elyor.dev
Mobx with react-query Mobx va react-query integratsiyasi haqida qiziq video chiqdi. (Chatlardan birida tashlashdi). react-query ni mobx store ichida ishlatsa bo'lar ekan. https://youtu.be/rNuIyo994OY?feature=shared #mobx #react_query #mobx_top @elyor_dev
Bundan qanaqa use case?

react-query'ning menga yoqmaydigan jihati, bu uning bir componentga bog'langani, ya'ni undan keladigan data bir nechta componentga kerak bo'lsa props drilling bo'lib ketishi, yana asosiy biznes logika ham componentlarda, ham storelarda (har bir app'da minimum bitta store bo'ladi, m-n: user sessionni saqlash uchun). qolib, aralashib ketishi. Yani SSOT (Single Source of Truth) buziladi.

mobx bilan (umuman istalgan stm bilan) integratsiya qilingan varianti bo'lsa butun logika uchun bitta qatlam javob berishini ancha osonlashtiradi, ui va bll ni maksimum ajrata olamiz, ham react-query barcha featurelarini saqlab qolamiz.

P.S. Videoda qo'shimcha DI (dependency inversion yoki injection) container library (react-ioc) ishlatilgan ekan, balkim kimgadir bu qiyin va tushunarsiz ko'rinar, sal keyinroq videodagi final codening soddaroq variantini (DI containerlarsiz) ko'rsatishga harakat qilaman.

#mobx #react_query

@elyor_dev
Mobx va react-query

Aytganimdek yuqoridagi videoda yozilgan codening biroz soddalashtirilgan variantini ishlatib todo-app yozdim. Screenshotlarda faqat ishlatilishi ko'rsatilgan, to'liq codeni esa codesandboxdan topasiz.

To'liq code: https://codesandbox.io/s/mobx-react-query-integration-8lpjg4?file=/src/todos/todo-model.ts

#mobx #mobx_react_query #todo_app

@elyor_dev
👍4
Lyric chekinish.

Ish uchun, yoki biron communitylarda umuman odam ko'p bo'lgan chatlarda bo'lsanggiz, profilinggizning nomiga e'tibor berib qo'ying. Eng yaxshi varianti ism, familiya yozib qo'yishlik nazarimda. Har xil hech ma'no yo'q simvollardan chekingan ma'qul. Hacker_123nimadir, badBoy777, ***fthyhh*#&#& va hokazo nomlar sizni jiddiy odam sifatida qaralmasligizga olib keladi.

P. S. Bu shunchaki tavsiya, hech kimni kamsitish niyatim yo'q

P. S. S. Yuqoridagi nomlar shunchaki hayolimga kelgani, aniq biron kishini yozganim yo'q

#tavsiya

@elyor_dev
👍10