Asoslar — konspekt

Bu modulda Redux’ning asosi o’rganildi: markazlashgan store, slice va React’ka ulanish.

Redux nima uchun kerak

React’da state komponentda yashaydi; uzoq "qarindosh" komponentga uzatish uchun props zanjiri qurishga to’g’ri keladi (prop drilling). Ilova kattarsa bu zanjirlar chigallashadi. Redux muammoni bitta qaror bilan yechadi: butun ilovaning umumiy state’i yagona markazda — store’da saqlanadi; istalgan komponent undan bevosita o’qiydi va o’zgartirish so’raydi.

Uch tayanch tushuncha:

Store — yagona umumiy xotira;
Action — "nima bo’ldi" xabari (masalan todo qo’shildi);
Reducer — action’ga qarab yangi state hisoblaydigan funksiya (React kursidagi useReducer bilan tanish g’oya).

O’rnatish va sozlash

Zamonaviy yo’l — Redux Toolkit (RTK): npm install @reduxjs/toolkit react-redux. Store shunday quriladi:

import { configureStore } from "@reduxjs/toolkit";
import todoReducer from "./todoSlice";

export const store = configureStore({
  reducer: { todos: todoReducer },
});

Va butun ilovaga Provider orqali beriladi (main.jsx’da):

<Provider store={store}>
  <App />
</Provider>

Provider — React’dagi "elektr tarmog’i": ichidagi har qanday komponent store’ga ulana oladi.

createSlice

Slice — state’ning bitta bo’lagi va uning reducer’lari, bitta joyda:

import { createSlice } from "@reduxjs/toolkit";

const todoSlice = createSlice({
  name: "todos",
  initialState: [],
  reducers: {
    addTodo: (state, action) => {
      state.push(action.payload);
    },
  },
});

export const { addTodo } = todoSlice.actions;
export default todoSlice.reducer;

E’tibor: state.push(...) — "to’g’ridan-to’g’ri o’zgartirish"ga o’xshaydi, lekin bu yerda mumkin: RTK ichidagi Immer kutubxonasi buni xavfsiz yangi state’ga aylantiradi. Klassik Redux’dagi qo’lda ...spread mashaqqatlari RTK’da yo’q.

useSelector va useDispatch

Komponent store bilan ikki hook orqali gaplashadi:

import { useSelector, useDispatch } from "react-redux";

const todos = useSelector((state) => state.todos);
const dispatch = useDispatch();

dispatch(addTodo({ id: 1, text: "Redux o'rganish" }));

useSelector — store’dan o’qish (kerakli bo’lakni tanlab olasiz); useDispatch — yozish so’rovi: action yuboriladi, reducer yangi state hisoblaydi, store’ga obuna komponentlar o’zi qayta chiziladi.

Tipik xato. state.todosni unutib statening o’zini olish yoki slice nomini store’dagi kalit bilan adashtirish. useSelector((state) => state.todos) dagi todos — configureStore’dagi reducer: { todos: ... } kaliti; nomlar mos bo’lishi shart.

Amaliyot

Bo’sh React loyihaga RTK o’rnatib, counter slice yasang (increment/decrement).
Ikki alohida komponentdan bitta hisoblagichni o’qing va o’zgartiring — prop’siz.
Slice kalitini ataylab noto’g’ri yozib xatoni ko’ring, keyin tuzating.
React kursidagi useReducer misolingizni Redux’ka ko’chiring — g’oya qanchalik o’xshashligini solishtiring.

Modul testini ishlang — keyingi modulda hammasi to’laqonli Todo ilovasida jamlanadi.