Chapter 20 — Redux Toolkit

Redux — global state boshqaruvi uchun eng mashhur kutubxonalardan biri. Redux Toolkit (RTK) — uni yozishni ancha soddalashtiradi.

---

20.1 Nega Redux? Flux Architecture

Simple Explanation

Redux — barcha ilova state'ini bitta markaziy "store"da saqlaydi, uni faqat action'lar orqali, reducer'lar yordamida o'zgartirish mumkin.

Diagram

code.text
TEXTNusxalash
01Component → dispatch(action) → Reducer → Yangi State → Store → Component qayta render bo'ladi

20.2 configureStore, createSlice

Example

App.jsx
React JSXNusxalash
01import { configureStore, createSlice } from "@reduxjs/toolkit";
02 
03const cartSlice = createSlice({
04  name: "cart",
05  initialState: { items: [] },
06  reducers: {
07    addItem: (state, action) => {
08      state.items.push(action.payload); // RTK Immer orqali "mutation"ga o'xshab yozish mumkin
09    },
10    clearCart: (state) => {
11      state.items = [];
12    },
13  },
14});
15 
16export const { addItem, clearCart } = cartSlice.actions;
17 
18const store = configureStore({
19  reducer: { cart: cartSlice.reducer },
20});

💡 Key Idea
Redux Toolkit ichidagi Immer kutubxonasi tufayli, state.items.push(...) yozish xavfsiz — RTK buni "orqa fonda" immutable update'ga aylantiradi.

20.3 useSelector, useDispatch va Async Thunks

Example

App.jsx
React JSXNusxalash
01function Cart() {
02  const items = useSelector((state) => state.cart.items);
03  const dispatch = useDispatch();
04 
05  return (
06    <button onClick={() => dispatch(addItem({ id: 1, name: "Telefon" }))}>
07      Qo'shish ({items.length})
08    </button>
09  );
10}

📝 Practice Exercises

🔴 Exercise 1 — Hard

Task: createSlice yordamida oddiy e-commerce savat (cart) slice yarating — qo'shish, o'chirish va tozalash amallari bilan.

🐛 Debugging Challenge

App.jsx
React JSXNusxalash
01function Cart() {
02  const items = useSelector((state) => state.items); // state.cart.items emas
03  return <p>{items.length}</p>;
04}

Your Task: Bu kod nega xato beradi (yoki undefined qaytaradi)?

<details> <summary>Solution</summary> `configureStore({ reducer: { cart: cartSlice.reducer } })` — bu `cart` nomli "slice" yaratadi, shuning uchun state strukturasi `{ cart: { items: [] } }` bo'ladi. To'g'ri selector: ```jsx const items = useSelector((state) => state.cart.items); ``` </details>

📌 Chapter Summary

Redux — markaziy store orqali predictable state boshqaruvi. Redux Toolkit — createSlice, configureStore orqali Redux yozishni soddalashtiradi, Immer esa "mutatsiyaga o'xshash" kodni xavfsiz qiladi.

🎯 Key Takeaways

• Redux — bitta markaziy store, action va reducer orqali boshqariladi
• RTK — boilerplate kodni kamaytiradi
• useSelector — o'qish, useDispatch — action yuborish uchun

⚡ Quick Cheat Sheet

App.jsx
React JSXNusxalash
01const slice = createSlice({ name, initialState, reducers: { action: (state, action) => {...} } });
02const store = configureStore({ reducer: { key: slice.reducer } });
03const value = useSelector((state) => state.key.field);
04const dispatch = useDispatch();
05dispatch(slice.actions.action(payload));

---