Bu modulda Redux to’laqonli Todo ilovasida qo’llandi: qo’shish, chiqarish, o’chirish, belgilash va tahrirlash.

Ilova tuzilishi

Todo — Redux o’rganishning mumtoz mashqi, chunki state’ning to’liq hayotiy sikli bor. Slice bitta, reducers bo’limida beshta amal:

const todoSlice = createSlice({
  name: "todos",
  initialState: [],
  reducers: {
    addTodo: (state, action) => {
      state.push(action.payload);
    },
    deleteTodo: (state, action) =>
      state.filter((t) => t.id !== action.payload),
    checkTodo: (state, action) => {
      const todo = state.find((t) => t.id === action.payload);
      todo.done = !todo.done;
    },
  },
});

Ikki uslubga e’tibor: push/xossani o’zgartirish (Immer yangi state yasab beradi) yoki yangi massiv qaytarish (filter) — RTK’da ikkalasi ham to’g’ri; faqat ikkalasini bitta reducer’da aralashtirmaslik kerak.

addTodo — forma bilan

Forma React kursidagi controlled naqsh; farq — submit’da state emas, dispatch:

const yubor = (e) => {
  e.preventDefault();
  dispatch(addTodo({ id: uuidv4(), text: matn, done: false }));
  setMatn("");
};

Todo obyektining shakli oldindan kelishiladi: id (uuidv4), text, done — keyingi barcha amallar shu shaklga tayanadi.

Ro’yxat va UI

useSelector bilan olingan massiv map orqali chiziladi — key, shartli class (bajarilganiga chizib qo’yish) — hammasi tanish:

{todos.map((todo) => (
  <li key={todo.id} className={todo.done ? "done" : ""}>
    {todo.text}
  </li>
))}

Natija: har element o’z holatini store’dan oladi; istalgan komponentdan qo’shilgan todo shu yerda darhol ko’rinadi.

delete, check va edit

Uchala amal ham bitta naqshda yuradi: elementdagi tugma → dispatch(action(id)) → reducer state’ni yangilaydi:

• deleteTodo — filter bilan yangi ro’yxat;
• checkTodo — find bilan topib, doneni teskarisiga ag’darish;
• editTodo / saveTodo — tahrirlash rejimiga o’tish (elementda isEditing belgisi) va yangi matnni saqlash.

Tipik xato. action.payload shaklini adashtirish: bir joyda butun obyekt (addTodo(obyekt)), boshqasida faqat id (deleteTodo(id)) yuboriladi. Reducer nimani kutsa, dispatch aynan shuni yuborishi kerak — shubhada console.log(action.payload) qiling.

Nima o’rgandik

Bu kichik ilovada Redux’ning to’liq davri bor: forma → dispatch → reducer → store → useSelector → UI. Kattaroq loyihada faqat slice’lar soni oshadi (todos, user, cart...) — naqsh o’sha-o’sha. Shu bilan frontend yo’nalishida state boshqaruvi yakunlandi; keyingi kurs — Next.js.

Amaliyot

1. Kursdagi Todo’ni to’liq qaytaring: add, delete, check, edit — hammasini o’zingiz yozing.
2. "Hammasini tozalash" tugmasi qo’shing (yangi reducer: bo’sh massiv qaytaradi).
3. Filtr qo’shing: hammasi / bajarilgan / bajarilmagan (alohida filter slice yoki lokal state bilan).
4. Todo’lar sonini header’da alohida komponentdan ko’rsating — Redux’ning "istalgan joydan o’qish" kuchini his qilasiz.

Yakuniy testni ishlang — va yo’nalishning so’nggi kursi Next.js’ga o’ting.