Redux Toolkit — nima, Zustand dan farqi, qachon kerak

~15 daq · React · State Boshqarish

Muammodan boshlaylik

Siz yangi kompaniyaga ishga kirdingiz. Loyiha — 5 yillik, 40 ta dasturchi ishlagan, 300 dan ortiq komponent. Ochib qaraysiz: store/, slices/, useSelector, useDispatch, createAsyncThunk. Bu — Redux.

Yoki vakansiyalarni ko'rasiz: "React, TypeScript, Redux Toolkit". Zustand ni bilasiz, u soddaroq — nega hali ham Redux?

Redux — React ekotizimidagi eng eski va eng keng tarqalgan state boshqarish kutubxonasi. Uni bilmasdan katta loyihalarda ishlash qiyin.

Redux g'oyasi

Redux uchta qoidaga asoslangan:

1. Yagona manba — butun ilovaning global state i bitta store da
2. State faqat o'qiladi — uni to'g'ridan-to'g'ri o'zgartirib bo'lmaydi; faqat action yuborish orqali
3. O'zgarishlar sof funksiyalarda — reducer lar eski state va action ni olib, yangi state qaytaradi

         ┌──────────────────────────────────────────┐
         │                                          │
         ▼                                          │
     ┌───────┐   dispatch(action)   ┌─────────┐     │
     │  UI   │ ───────────────────▶ │ reducer │     │
     └───────┘                      └─────────┘     │
         ▲                               │          │
         │   useSelector                 ▼          │
         │                          ┌─────────┐     │
         └───────────────────────── │  store  │ ────┘
                                    └─────────┘

Bu useReducer (20-dars) bilan bir xil g'oya — faqat butun ilova miqyosida.

// Action — "nima sodir bo'ldi" degan oddiy obyekt
{ type: 'savat/qoshish', payload: { id: 42, nomi: 'Kitob' } }

// Reducer — eski state + action → yangi state
function savatReducer(state, action) {
  switch (action.type) {
    case 'savat/qoshish':
      return { ...state, mahsulotlar: [...state.mahsulotlar, action.payload] };
    default:
      return state;
  }
}

Redux va Redux Toolkit

Klassik Redux (2015) mashhur edi, lekin juda ko'p boilerplate (takroriy kod) talab qilardi: action type konstantalari, action creator funksiyalari, switch li reducer lar, qo'lda ...spread, store sozlash, middleware ulash. Bitta funksiyani qo'shish uchun 4–5 ta faylni o'zgartirish kerak edi.

Redux Toolkit (RTK) — Redux jamoasining rasmiy, zamonaviy usuli. U boilerplate ni deyarli butunlay olib tashlaydi:

// Redux Toolkit — bitta slice
const savatSlice = createSlice({
  name: 'savat',
  initialState: { mahsulotlar: [] },
  reducers: {
    qoshish: (state, action) => {
      state.mahsulotlar.push(action.payload);   // immer — to'g'ridan-to'g'ri
    },
  },
});

[!INFO] Bugun "Redux" deyilganda Redux Toolkit tushuniladi. Redux jamoasi klassik createStore ni rasmiy ravishda eskirgan deb belgilagan. Eski loyihalarda klassik Redux ni uchratishingiz mumkin, lekin yangi kod — faqat RTK bilan. Batafsil — 60-dars.

Redux Toolkit nimalarni beradi

Zustand va Redux Toolkit

// Zustand
const useSavat = create((set) => ({
  mahsulotlar: [],
  qoshish: (m) => set((s) => ({ mahsulotlar: [...s.mahsulotlar, m] })),
}));

const qoshish = useSavat((s) => s.qoshish);
qoshish(mahsulot);

// Redux Toolkit
const savatSlice = createSlice({
  name: 'savat',
  initialState: { mahsulotlar: [] },
  reducers: {
    qoshish: (state, action) => { state.mahsulotlar.push(action.payload); },
  },
});
export const { qoshish } = savatSlice.actions;

const dispatch = useDispatch();
dispatch(qoshish(mahsulot));

Qachon Redux Toolkit

✅ Redux Toolkit mos:

• Katta jamoa — 10+ dasturchi; qat'iy tuzilma kodni bir xil saqlaydi
• Murakkab state mantiq — ko'p slice lar bir-biriga ta'sir qiladi, action lar zanjiri
• Kuchli tarix kerak — har bir o'zgarishni qayd qilish, "bekor qilish" (undo), xatolarni qayta tiklash
• Loyihada allaqachon Redux bor
• Server state uchun RTK Query ni ham ishlatmoqchisiz — hammasi bitta ekotizimda

✅ Zustand mos:

• Kichik va o'rta loyihalar
• Global client state kam (savat, sozlamalar, auth)
• Server state — TanStack Query bilan
• Tez boshlash va kam kod muhim

[!TIP] Agar yangi loyiha boshlayotgan bo'lsangiz va global state kam bo'lsa — Zustand + TanStack Query — bugungi eng mashhur kombinatsiya. Lekin Redux Toolkit ni ham albatta o'rganing: mavjud loyihalarning katta qismi unda yozilgan va intervyularda tez-tez so'raladi.

O'rnatish

npm install @reduxjs/toolkit react-redux

• @reduxjs/toolkit — Redux ning o'zi va RTK vositalari
• react-redux — React bilan bog'lash: Provider, useSelector, useDispatch

Amaliy qism — keyingi darsda.

Nima uchun shunday?

Nima uchun Redux har bir o'zgarishni "action" sifatida yuborishni talab qiladi — to'g'ridan-to'g'ri o'zgartirish soddaroq emasmi?

Soddaroq — lekin kuzatib bo'lmaydi. Katta ilovada state o'nlab joydan o'zgaradi, va "bu qiymat qanday qilib noto'g'ri bo'lib qoldi?" degan savolga javob topish soatlab vaqt oladi. Redux da har bir o'zgarish — nomli hodisa (savat/qoshish), u yozib qo'yiladi va DevTools da ko'rinadi. Siz ilova tarixini qadam-baqadam qayta ko'rishingiz, istalgan holatga qaytishingiz, hatto foydalanuvchining xato hisobotiga action lar ro'yxatini qo'shib, xatoni aynan qayta hosil qilishingiz mumkin. Bu — "kamroq kod" o'rniga "ko'proq oldindan aytib bo'ladigan kod" tanlovi. Kichik loyihada bu ortiqcha; 300 komponentli loyihada — hayotiy zarurat.

Xulosa

Eslab qoling:

• Redux: yagona store, state faqat action orqali o'zgaradi, reducer lar — sof funksiyalar
• useReducer g'oyasi — butun ilova miqyosida
• Redux Toolkit — Redux ning zamonaviy rasmiy usuli; klassik Redux — eskirgan
• RTK: configureStore, createSlice (immer bilan), createAsyncThunk, RTK Query
• Zustand — kichik, erkin, tez; RTK — qat'iy tuzilma, kuchli DevTools, katta jamoalar
• Yangi loyiha uchun ko'pincha Zustand + TanStack Query; lekin RTK ni bilish — bozor talabi
• O'rnatish: @reduxjs/toolkit + react-redux

Keyingi dars

60-dars: Redux Toolkit — slice, reducer, action