Chapter 18 — useReducer

useState oddiy holatlar uchun yetarli. State murakkablashganda (bir nechta bog'liq maydon, ko'p turdagi yangilanish) — useReducer aniqroq tuzilma beradi.

---

18.1 Reducer Pattern Asoslari

Example

App.jsx
React JSXNusxalash
01function reducer(state, action) {
02  switch (action.type) {
03    case "increment":
04      return { count: state.count + 1 };
05    case "decrement":
06      return { count: state.count - 1 };
07    default:
08      return state;
09  }
10}
11 
12function Counter() {
13  const [state, dispatch] = useReducer(reducer, { count: 0 });
14  return (
15    <>
16      <button onClick={() => dispatch({ type: "increment" })}>+</button>
17      <span>{state.count}</span>
18      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
19    </>
20  );
21}

Diagram

code.text
TEXTNusxalash
01User Action → dispatch(action) → Reducer(state, action) → Yangi State → UI Update

18.2 Todo va Shopping Cart Reducerlar

Example

App.jsx
React JSXNusxalash
01function todoReducer(todos, action) {
02  switch (action.type) {
03    case "add":
04      return [...todos, { id: Date.now(), text: action.text, done: false }];
05    case "toggle":
06      return todos.map((t) => t.id === action.id ? { ...t, done: !t.done } : t);
07    case "remove":
08      return todos.filter((t) => t.id !== action.id);
09    default:
10      return todos;
11  }
12}

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: Increment/Decrement/Reset action'lari bilan Counter reducer yozing.

🟡 Exercise 2 — Medium

Task: Todo qo'shish, o'chirish, bajarilgan deb belgilash — barchasi reducer orqali.

🔴 Exercise 3 — Hard

Task: Shopping Cart — mahsulot qo'shish, o'chirish, sonini o'zgartirish va umumiy narxni hisoblash.

🐛 Debugging Challenge

App.jsx
React JSXNusxalash
01function reducer(state, action) {
02  switch (action.type) {
03    case "increment":
04      state.count++;
05      return state;
06    default:
07      return state;
08  }
09}

Your Task: Bu reducer nega noto'g'ri?

<details> <summary>Solution</summary> `state.count++` — state'ni to'g'ridan-to'g'ri mutate qiladi, bu React/reducer qoidalarini buzadi. Yechim: ```jsx case "increment": return { ...state, count: state.count + 1 }; ``` </details>

📌 Chapter Summary

useReducer — bir nechta bog'liq state yangilanishini bitta joyga jamlaydi. Reducer — har doim pure funksiya. dispatch({ type, payload }) — "nima sodir bo'lishi kerak"ni e'lon qilish, "qanday" qilishni reducer hal qiladi.

🎯 Key Takeaways

• useReducer — murakkab, bog'liq state uchun useState'dan aniqroq alternativa
• Reducer — har doim sof (pure) funksiya
• dispatch — "nima" ni e'lon qiladi, reducer "qanday"ni hal qiladi

⚡ Quick Cheat Sheet

App.jsx
React JSXNusxalash
01function reducer(state, action) {
02  switch (action.type) {
03    case "TYPE": return { ...state, /* yangilanish */ };
04    default: return state;
05  }
06}
07const [state, dispatch] = useReducer(reducer, initialState);
08dispatch({ type: "TYPE", payload: data });

---