Redux Toolkit, MobX, Context API — nega hammasidan voz kechdim

Redux Toolkit, MobX, Context API — nega hammasidan voz kechdim

Redux Toolkit bilan ishlayverib qo'l qaqshab qolgan edi. Bir xil pattern, bir xil kod, faqat nomlar o'zgaradi. createAsyncThunk — yoz. Slice — yoz. ExtraReducer — yoz. Loading, success, error — yana yoz. Uch xil API chaqiruvi bo'lsa, uch marta takrorla. O'ndan oshsa, o'n marta. Bu zerikarli, xato chiqarishga moyil, va eng muhimi — keraksiz.

MobX'da biroz boshqacha. Dekoratorlar, observable'lar, reaction'lar. "Magic" ko'p. Ishlab turibdi, lekin nima bo'layotganini tushunish qiyin. Bir joyda bug' chiqsa, qayerdan kelganini topish soatlab ketadi. Katta jamoada MobX — bu "trust me bro" pattern'iga o'xshab qoladi. Hech kim to'liq nazorat qila olmaydi.

Context API esa butunlay boshqa hayvon. React'ni o'zi bergan, "ishlatsang bo'ladi" degan. Lekin ishlatib ko'rsang — re-render boshqa, optimizatsiya boshqa muammo. Selector yo'q, DevTools yo'q, debug qilish — tushda ko'r. Bir context'ga 10 ta komponent bog'langan, bittasi o'zgarsa, hammasi isiydi. Kichik loyihada o'tadi. Katta loyihada — bosh og'rig'i.

Zustand'ni ko'rganimda "shu-chi?" dedim. Bir funksiya, bir store. Hammasi shu.

const useStore = create((set) => ({
  user: null,
  loading: false,
  fetchUser: async (id) => {
    set({ loading: true })
    const user = await api.getUser(id)
    set({ user, loading: false })
  },
}))

Hech qanday slice, thunk, extraReducer, provider, decorator. Oddiy funksiya. Ishlayapti. Bo'ldi.

Selective re-render born-birin. Selector berasan — faqat o'sha o'zganda qayta ishlaydi. Boshqa hech narsaga tegmaydi.

const count = useStore((state) => state.count)

Redux DevTools'ga ulanish ham bor. Immer bilan ishlash ham. Lekin hech biri majburiy emas.

1 KB. Hammasi shuncha.