12.2-bob: Redux Toolkit (store, slice, async thunk)

  CONTEXT YETMAYDI QACHON (12.1: 2.9, 2.10):
   Katta, murakkab state (ko'p bog'liq qism)
   Tez-tez o'zgaradigan (selektor yo'q  ko'p re-render — 12.1: 2.3)
   Murakkab yangilanishlar (ko'p joydan bir state'ni o'zgartirish)
   Kuchli debugging (vaqt sayohati, har o'zgarishni kuzatish)
   Jamoaviy (qat'iy struktura — har kim bir xil naqshda)

  REDUX BERADIGAN NARSALAR:
   Markaziy store (butun holat bitta joyda — "single source of truth")
   Bashoratli oqim (faqat action orqali o'zgartirish — qat'iy)
   Tabiiy selektor (useSelector — faqat kerakli qism tinglash — 2.7)
   DevTools (vaqt sayohati, har action ko'rinadi — 2.9)
   Middleware (async, logging, custom mantiq — 2.8)

   Context — kichik/oddiy global state; Redux — KATTA, MURAKKAB, kuzatiladigan state
   Redux — "boilerplate ko'p" edi  Redux Toolkit buni HAL QILDI (2.4)

  REDUX UCH TUSHUNCHA (Flux arxitekturasi — bir tomonlama oqim):

  ┌─────────────────────────────────────────────────────────────┐
  │  1. STORE — butun holat (state) BITTA obyektda (single source)│
  │     { user: {...}, cart: [...], theme: "dark" }              │
  │                                                                │
  │  2. ACTION — "nima bo'ldi" (obyekt — type + payload):         │
  │     { type: "cart/add", payload: product }                    │
  │                                                                │
  │  3. REDUCER — eski state + action  yangi state (sof funksiya):│
  │     (state, action) => newState                               │
  └─────────────────────────────────────────────────────────────┘

  BIR TOMONLAMA OQIM (predictable — bashoratli):
  Komponent ──dispatch(action)──► Store (reducer ishlaydi) ──► yangi state ──► komponent render
       ▲                                                                            │
       └────────────────────── useSelector (o'qiydi) ◄─────────────────────────────┘

   State'ni FAQAT action orqali o'zgartirish (to'g'ridan emas — qat'iy oqim)
   Reducer SOF (11.6: 2.3) — bir xil action  bir xil natija (bashoratli, sinaladigan)

  REDUX QISMLARI (RTK bilan — qanday joylashadi):

  store.ts ──────────── configureStore({ reducer: { cart, auth, ... } })
     │                  (barcha slice'larni birlashtiradi + DevTools/middleware)
     ▼
  features/cart/cartSlice.ts ── createSlice({ name, initialState, reducers })
     │                          (cart holati + uni o'zgartiruvchi reducer'lar)
     ▼
  Komponent ──── useSelector(s => s.cart)  +  useDispatch()
                 (o'qish)                       (yozish — dispatch(action))

  PROVIDER (Context kabi — store'ni ilovaga beradi):
  <Provider store={store}>   // react-redux Provider (ildizda)
    <App />
  </Provider>

  FAYL TUZILISHI (feature-based — 11.3: 2.9):
  src/
  ├── app/store.ts              configureStore
  └── features/
      ├── cart/cartSlice.ts     cart slice
      └── auth/authSlice.ts     auth slice

   store (markaz) + slice'lar (har feature holati) + Provider (ilovaga ulashadi)
   Feature-based — har slice o'z papkasida (cart/, auth/ — 11.3: 2.9)

  createSlice — reducer va action'ni AVTOMATIK (eski Redux boilerplate'ini yo'qotadi):

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

  const counterSlice = createSlice({
    name: "counter",                    // slice nomi (action type prefiksi: "counter/...")
    initialState: { value: 0 },         // boshlang'ich holat
    reducers: {                          // o'zgartiruvchi funksiyalar:
      increment: (state) => { state.value += 1; },   //  "mutatsiya" (Immer — 2.5)
      decrement: (state) => { state.value -= 1; },
      addBy: (state, action) => { state.value += action.payload; },   // payload bilan
    },
  });

  export const { increment, decrement, addBy } = counterSlice.actions;   //  action'lar AVTOMATIK
  export default counterSlice.reducer;                                    // reducer

  configureStore — store yaratadi (DevTools/middleware AVTOMATIK):
  const store = configureStore({
    reducer: { counter: counterSlice.reducer },   // slice'larni birlashtir
  });

   createSlice — name + initialState + reducers  action va reducer AVTOMATIK (boilerplate yo'q)
   configureStore — DevTools, thunk middleware, immutability tekshiruvi AVTOMATIK

  IMMER — RTK ICHIDA (state'ni "mutatsiya qilgandek" yoziladi, natija IMMUTABLE):

  // Eski Redux (qo'lda immutable — zerikarli — 11.4: 2.7):
  case "add": return { ...state, items: [...state.items, action.payload] };
  case "update": return { ...state, user: { ...state.user, name: action.payload } };

  // RTK + Immer (mutatsiya sintaksisi — Immer immutable qiladi):
  reducers: {
    add: (state, action) => { state.items.push(action.payload); },        // push — Immer OK
    update: (state, action) => { state.user.name = action.payload; },     // to'g'ridan — OK
  }

  QANDAY ISHLAYDI (ichki):
  - Immer "draft" (qoralama) yaratadi — unga mutatsiya qilinadi
  - Immer o'zgarishlarni kuzatib, YANGI immutable obyekt hosil qiladi (eski tegmaydi)
   "mutatsiya" yoziladi, lekin natija immutable (ikkalasining foydasi)

   FAQAT createSlice/createReducer ICHIDA mutatsiya mumkin (Immer o'rab turibdi)
   Tashqarida (oddiy funksiya) mutatsiya — XATO (Immer yo'q — immutability buziladi — 11.4: 2.7)

  react-redux hooklari (store'ni komponentga ulaydi):

  // useSelector — store'dan KERAKLI qismni O'QISH (tabiiy selektor — 12.1: 2.9 yechimi):
  const count = useSelector((state) => state.counter.value);   // faqat counter.value
  const items = useSelector((state) => state.cart.items);

  // useDispatch — action YUBORISH (yozish):
  const dispatch = useDispatch();
  dispatch(increment());                  // action creator (createSlice'dan — 2.4)
  dispatch(addBy(5));                      // payload bilan

  SELEKTOR KUCHI (Context'dan farq — 12.1: 2.3):
   useSelector(s => s.counter.value) — FAQAT counter.value o'zgarganda komponent render
   cart yoki auth o'zgarsa — BU komponent render BO'LMAYDI (faqat tinglagan qism)

  ┌────────────────────────────────────────────────────────────┐
  │ useSelector: store'dan qism o'qish (faqat o'sha qism o'zgarsa │
  │ render) | useDispatch: action yuborish (o'zgartirish)         │
  └────────────────────────────────────────────────────────────┘

   useSelector — TABIIY selektor (faqat tinglagan qism o'zgarsa render — Context'ning yechimi)
   useSelector qiymat REFERENTIAL teng bo'lsa render yo'q (obyekt qaytarsa — memoize — 2.10)

  createAsyncThunk — ASYNC amal (API so'rovi) + loading/error AVTOMATIK:

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

  // 1. Async thunk (API so'rovi):
  export const fetchUsers = createAsyncThunk("users/fetch", async () => {
    const res = await fetch("/api/users");
    return res.json();              // bu — fulfilled payload bo'ladi
  });

  // 2. Slice — thunk'ning 3 holatini boshqaradi (extraReducers):
  const usersSlice = createSlice({
    name: "users",
    initialState: { items: [], loading: false, error: null },
    reducers: {},
    extraReducers: (builder) => {
      builder
        .addCase(fetchUsers.pending, (state) => { state.loading = true; })       // boshlandi
        .addCase(fetchUsers.fulfilled, (state, action) => {                      // muvaffaqiyat
          state.loading = false; state.items = action.payload;
        })
        .addCase(fetchUsers.rejected, (state, action) => {                       // xato
          state.loading = false; state.error = action.error.message;
        });
    },
  });

  // Komponentda: dispatch(fetchUsers());   pending  fulfilled/rejected (avtomatik)

   createAsyncThunk — async + 3 holat (pending/fulfilled/rejected) AVTOMATIK
   extraReducers — thunk holatlarini boshqaradi (loading/error qo'lda — lekin tartibli)

  MIDDLEWARE — action'ning store'ga yetishidan OLDIN oraliq mantiq (logging, async, custom):

  dispatch(action) ──► [middleware 1] ──► [middleware 2] ──► reducer ──► store
                       (har action shu yerdan o'tadi — logging, async, analytics)

  RTK'da avtomatik middleware (configureStore):
  - redux-thunk (async — createAsyncThunk ishlashi uchun)
  - immutability tekshiruvi (dev — mutatsiyani tutadi)
  - serializability tekshiruvi (dev — non-serializable state'ni tutadi)

  CUSTOM middleware (masalan logging):
  const logger = (store) => (next) => (action) => {
    console.log("dispatch:", action.type);
    return next(action);          // keyingi middleware/reducer'ga uzat
  };

  REDUX DEVTOOLS (brauzer kengaytmasi — Redux'ning super-kuchi):
   Har action va state o'zgarishini ko'rish (kuzatish)
   VAQT SAYOHATI — oldingi holatga qaytarish (debug)
   Action'ni "qayta o'ynatish", state'ni tekshirish

   Middleware — action oqimiga oraliq mantiq (RTK avtomatik thunk/tekshiruv beradi)
   DevTools — Redux'ning eng katta afzalligi (vaqt sayohati — debugging — 2.1)

  NORMALIZATSIYA — ro'yxatni ID bo'yicha OBYEKT sifatida saqlash (tez qidiruv/yangilash):

   Massiv (qidirish/yangilash — O(n) — sekin katta ro'yxatda):
  items: [{ id: "1", name: "A" }, { id: "2", name: "B" }]
  // yangilash: items.map(i => i.id === "1" ? {...i, ...} : i)  — butun massivni aylanish

   Normalizatsiya (ID  obyekt — O(1) qidiruv/yangilash):
  { ids: ["1", "2"], entities: { "1": {name:"A"}, "2": {name:"B"} } }
  // yangilash: entities["1"] = {...}  — to'g'ridan (tez)

  createEntityAdapter — normalizatsiyani AVTOMATIK qiladi:
  const usersAdapter = createEntityAdapter();
  const usersSlice = createSlice({
    name: "users",
    initialState: usersAdapter.getInitialState({ loading: false }),
    reducers: {
      addUser: usersAdapter.addOne,          //  tayyor CRUD reducer'lar
      updateUser: usersAdapter.updateOne,
      removeUser: usersAdapter.removeOne,
    },
  });
  // Selektorlar ham avtomatik: usersAdapter.getSelectors()

   createEntityAdapter — ro'yxatni normalize (IDobyekt) + CRUD reducer/selektor AVTOMATIK
   Katta ro'yxat (foydalanuvchi, mahsulot)da tez qidiruv/yangilash (O(1) — performance)

  MUAMMO: useSelector YANGI obyekt/hisob qaytarsa — har render re-render (referential — 2.6):

   const filtered = useSelector(s => s.items.filter(i => i.active));   // HAR render yangi massiv!
  //  filter har safar yangi massiv  useSelector "o'zgardi" deb biladi  har render re-render

   createSelector — natijani KESHLAYDI (kirish o'zgarmasa — eski natija):
  import { createSelector } from "@reduxjs/toolkit";

  const selectActiveItems = createSelector(
    (state) => state.items,                  // kirish 1 (input selektor)
    (items) => items.filter((i) => i.active) // hisob (kirish o'zgargandagina qayta hisob)
  );
  const filtered = useSelector(selectActiveItems);   // memoized — kerakli render

  // Argument bilan (parametrli selektor):
  const selectById = createSelector(
    [(state) => state.items, (state, id) => id],
    (items, id) => items.find((i) => i.id === id)
  );

   createSelector — qimmat/hosilangan hisobni keshlaydi (reselect — 11.6: 2.8 g'oyasi)
   useSelector'da YANGI obyekt qaytaradigan selektor  createSelector (aks holda har render re-render)

  TYPED HOOKS (RTK + TypeScript — 11.14):
  // store turlarini chiqarish:
  export type RootState = ReturnType<typeof store.getState>;
  export type AppDispatch = typeof store.dispatch;

  // Typed hooklar (har joyda qayta yozmaslik):
  export const useAppDispatch = () => useDispatch<AppDispatch>();
  export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

  // Komponentda — to'liq type-safe:
  const count = useAppSelector((state) => state.counter.value);   // state: RootState (autocomplete)

  QACHON REDUX (Context/Zustand bilan taqqos):
  ┌──────────────┬─────────────────────────────────────────────┐
  │ Context      │ kam o'zgaradigan global (theme/auth — 12.1)   │
  │ Zustand      │ oddiy global state (yengil, kam boilerplate)  │
  │ REDUX (RTK)  │ KATTA, murakkab, jamoaviy, DevTools/middleware│
  │ RTK/TanStack │ SERVER ma'lumoti (12.3/12.4 — Redux EMAS)    │
  └──────────────┴─────────────────────────────────────────────┘

   RTK + TypeScript — typed hooks (useAppSelector/useAppDispatch — type-safe)
   Redux — katta/murakkab/jamoaviy; kichik  Zustand/Context; server  Query

  PREPARE CALLBACK — action payload'ini reducer'dan OLDIN tayyorlash (id/timestamp):

  reducers: {
    addTodo: {
      reducer: (state, action) => { state.push(action.payload); },  // sof reducer
      prepare: (text) => ({ payload: { id: nanoid(), text, done: false } }),  // payload tayyorlash
    },
  }
  // dispatch(addTodo("Non olish"))   prepare id/done qo'shadi  reducer'ga tayyor payload

  SHALLOWEQUAL — useSelector obyekt qaytarganda ortiqcha render'ni to'xtatish:

  import { shallowEqual, useSelector } from "react-redux";
  //  const { a, b } = useSelector(s => ({ a: s.a, b: s.b }));  // har safar yangi obyekt  render
  const { a, b } = useSelector(s => ({ a: s.a, b: s.b }), shallowEqual);  // sayoz solishtir  render yo'q
  // yoki: ikki alohida useSelector (har biri primitiv — yaxshiroq)

  LISTENER MIDDLEWARE — action'ga "reaksiya" (side effect — thunk'ning yengil muqobili):

  import { createListenerMiddleware } from "@reduxjs/toolkit";
  const listener = createListenerMiddleware();
  listener.startListening({
    actionCreator: logout,                          // logout dispatch bo'lganda...
    effect: async (action, api) => {                // ...bu effekt ishlaydi
      localStorage.removeItem("token");             // side effect (masalan tozalash)
      api.dispatch(cartActions.clearCart());        // boshqa action ham chaqirish mumkin
    },
  });
  // store'ga: middleware: (gd) => gd().prepend(listener.middleware)

   prepare — payload'ni tayyorlash (id/timestamp — reducer sof qoladi)
   shallowEqual — obyekt qaytaruvchi useSelector'da ortiqcha render'ni to'xtatadi
   listener middleware — action'ga reaksiya (side effect) — thunk'ning zamonaviy muqobili

  REDUX-PERSIST — store'ni localStorage'ga SAQLASH (sahifa yangilanganda holat qoladi):

  import { persistStore, persistReducer } from "redux-persist";
  import storage from "redux-persist/lib/storage";   // localStorage

  const persistConfig = { key: "root", storage, whitelist: ["cart", "auth"] };  // qaysi slice
  const persistedReducer = persistReducer(persistConfig, rootReducer);

  const store = configureStore({
    reducer: persistedReducer,
    middleware: (gd) => gd({
      serializableCheck: { ignoredActions: ["persist/PERSIST", "persist/REHYDRATE"] },
    }),
  });
  export const persistor = persistStore(store);
  // <PersistGate loading={null} persistor={persistor}><App/></PersistGate>

  TEST — slice va thunk (reducer sof  test oson):

  // slice reducer testi (Immer natijasini tekshirish):
  expect(counterReducer({ value: 0 }, increment())).toEqual({ value: 1 });

  // thunk testi (fetch mock, holatlarni tekshirish):
  const state = usersReducer(initial, fetchUsers.fulfilled([{ id: 1 }], "", undefined));
  expect(state.items).toHaveLength(1);

   redux-persist — holatni localStorage'ga saqlash (yangilanganda qoladi — whitelist bilan tanlab)
   Reducer SOF  test oson: (state, action)  kutilgan state (mock kam kerak)

SLICE 2.4-bob:       createSlice({ name, initialState, reducers: { add: (s,a) => {...} } })
STORE 2.4-bob:       configureStore({ reducer: { counter: counterReducer } })
PROVIDER 2.3-bob:    <Provider store={store}><App/></Provider>
ACTION 2.4-bob:      export const { increment } = slice.actions
SELECT 2.6-bob:      const x = useSelector((s) => s.counter.value)
DISPATCH 2.6-bob:    const d = useDispatch(); d(increment()) / d(addBy(5))
IMMER 2.5-bob:       reducers: { add: (s,a) => { s.items.push(a.payload) } }  // mutatsiya OK
THUNK 2.7-bob:       createAsyncThunk("x/fetch", async () => (await fetch()).json())
                   extraReducers: builder => builder.addCase(t.pending/fulfilled/rejected)
ENTITY 2.9-bob:      createEntityAdapter() — addOne/updateOne/removeOne + selectors
SELECTOR 2.10-bob:   createSelector([inputSel], (input) => derived)  // memoized
TYPED 2.11-bob:      RootState = ReturnType<typeof store.getState>; useAppSelector
PREPARE 2.12-bob:    reducers: { add: { reducer: (s,a)=>{...}, prepare: (x)=>({payload:...}) } }
SHALLOW 2.12-bob:    useSelector(s => ({a,b}), shallowEqual)  // obyekt selektor
LISTENER 2.12-bob:   createListenerMiddleware(); l.startListening({ actionCreator, effect })
PERSIST 2.13-bob:    persistReducer(cfg, rootReducer); persistStore(store) + <PersistGate>
TEST 2.13-bob:       expect(reducer(state, action())).toEqual(nextState)  // sof reducer

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

interface CounterState { value: number; }
const initialState: CounterState = { value: 0 };

const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    increment: (state) => { state.value += 1; },                    // Immer — mutatsiya OK (2.5)
    decrement: (state) => { state.value -= 1; },
    incrementByAmount: (state, action: PayloadAction<number>) => {  // typed payload
      state.value += action.payload;
    },
    reset: (state) => { state.value = 0; },
  },
});

export const { increment, decrement, incrementByAmount, reset } = counterSlice.actions;
export default counterSlice.reducer;

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "../features/counter/counterSlice";
import cartReducer from "../features/cart/cartSlice";

export const store = configureStore({
  reducer: {
    counter: counterReducer,
    cart: cartReducer,
  },
  // DevTools, thunk, immutability tekshiruvi — AVTOMATIK (2.4, 2.8)
});

export type RootState = ReturnType<typeof store.getState>;   // typed (2.11)
export type AppDispatch = typeof store.dispatch;

// main.tsx
import { Provider } from "react-redux";
import { store } from "./app/store";

createRoot(document.getElementById("root")!).render(
  <Provider store={store}>      {/* store'ni ilovaga ulaydi */}
    <App />
  </Provider>
);

// app/hooks.ts — typed hooklar 11.14-bob:
import { useDispatch, useSelector, type TypedUseSelectorHook } from "react-redux";
import type { RootState, AppDispatch } from "./store";

export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

import { useAppSelector, useAppDispatch } from "../app/hooks";
import { increment, decrement, incrementByAmount } from "./counterSlice";

function Counter() {
  const count = useAppSelector((state) => state.counter.value);   // o'qish (faqat counter o'zgarsa render)
  const dispatch = useAppDispatch();

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
      <button onClick={() => dispatch(incrementByAmount(5))}>+5</button>
    </div>
  );
}

interface CartItem { id: string; name: string; price: number; qty: number; }
interface CartState { items: CartItem[]; }

const cartSlice = createSlice({
  name: "cart",
  initialState: { items: [] } as CartState,
  reducers: {
    addItem: (state, action: PayloadAction<CartItem>) => {
      const existing = state.items.find((i) => i.id === action.payload.id);
      if (existing) existing.qty += 1;                       // Immer — to'g'ridan o'zgartirish OK
      else state.items.push({ ...action.payload, qty: 1 });  // push OK (2.5)
    },
    removeItem: (state, action: PayloadAction<string>) => {
      state.items = state.items.filter((i) => i.id !== action.payload);
    },
    updateQty: (state, action: PayloadAction<{ id: string; qty: number }>) => {
      const item = state.items.find((i) => i.id === action.payload.id);
      if (item) item.qty = action.payload.qty;
    },
    clearCart: (state) => { state.items = []; },
  },
});
export const { addItem, removeItem, updateQty, clearCart } = cartSlice.actions;
export default cartSlice.reducer;

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

export const fetchUsers = createAsyncThunk("users/fetch", async (_, { rejectWithValue }) => {
  try {
    const res = await fetch("/api/users");
    if (!res.ok) throw new Error("Server xatosi");
    return await res.json();                    // fulfilled payload
  } catch (err) {
    return rejectWithValue((err as Error).message);   // rejected payload
  }
});

interface UsersState { items: User[]; loading: boolean; error: string | null; }
const usersSlice = createSlice({
  name: "users",
  initialState: { items: [], loading: false, error: null } as UsersState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUsers.pending, (state) => { state.loading = true; state.error = null; })
      .addCase(fetchUsers.fulfilled, (state, action) => {
        state.loading = false; state.items = action.payload;
      })
      .addCase(fetchUsers.rejected, (state, action) => {
        state.loading = false; state.error = action.payload as string;
      });
  },
});
export default usersSlice.reducer;
// Komponentda: useEffect(() => { dispatch(fetchUsers()); }, []);

function UsersList() {
  const { items, loading, error } = useAppSelector((state) => state.users);
  const dispatch = useAppDispatch();

  useEffect(() => {
    dispatch(fetchUsers());                     // pending  fulfilled/rejected (avtomatik)
  }, [dispatch]);

  if (loading) return <Spinner />;
  if (error) return <p className="error">{error}</p>;
  return <ul>{items.map((u) => <li key={u.id}>{u.name}</li>)}</ul>;
}
//  Lekin server ma'lumoti uchun RTK Query 12.3-bob ANCHA yaxshiroq (kesh/sync — 2.7)

import { createSelector } from "@reduxjs/toolkit";
import type { RootState } from "../app/store";

//  const total = useSelector(s => s.cart.items.reduce(...))  — har render yangi hisob

//  memoized — faqat items o'zgarganda qayta hisob:
export const selectCartTotal = createSelector(
  (state: RootState) => state.cart.items,
  (items) => items.reduce((sum, item) => sum + item.price * item.qty, 0)
);
export const selectCartCount = createSelector(
  (state: RootState) => state.cart.items,
  (items) => items.reduce((sum, item) => sum + item.qty, 0)
);

// Komponentda:
const total = useAppSelector(selectCartTotal);   // memoized (kerakli render)

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

const productsAdapter = createEntityAdapter<Product>();   // ID  obyekt (normalize)

const productsSlice = createSlice({
  name: "products",
  initialState: productsAdapter.getInitialState({ loading: false }),   // {ids, entities, loading}
  reducers: {
    addProduct: productsAdapter.addOne,             // tayyor CRUD reducer (2.9)
    updateProduct: productsAdapter.updateOne,
    removeProduct: productsAdapter.removeOne,
    setProducts: productsAdapter.setAll,
  },
});
export default productsSlice.reducer;

// Avtomatik selektorlar:
export const { selectAll: selectAllProducts, selectById: selectProductById } =
  productsAdapter.getSelectors((state: RootState) => state.products);
//  O(1) qidiruv/yangilash (entities["id"]) — katta ro'yxat uchun (2.9)

interface AuthState { user: User | null; token: string | null; }
const authSlice = createSlice({
  name: "auth",
  initialState: { user: null, token: localStorage.getItem("token") } as AuthState,
  reducers: {
    setCredentials: (state, action: PayloadAction<{ user: User; token: string }>) => {
      state.user = action.payload.user;
      state.token = action.payload.token;
      localStorage.setItem("token", action.payload.token);   // persist (side effect — odatda thunk'da)
    },
    logout: (state) => {
      state.user = null; state.token = null;
      localStorage.removeItem("token");
    },
  },
});
export const { setCredentials, logout } = authSlice.actions;
export default authSlice.reducer;

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

const loggerMiddleware: Middleware = (store) => (next) => (action) => {
  console.group(action.type);
  console.log("oldingi state:", store.getState());
  const result = next(action);                  // keyingi middleware/reducer'ga uzat
  console.log("yangi state:", store.getState());
  console.groupEnd();
  return result;
};

// store'ga qo'shish:
const store = configureStore({
  reducer: { /* ... */ },
  middleware: (getDefault) => getDefault().concat(loggerMiddleware),   // default + custom
});
//  Middleware — action oqimiga oraliq mantiq (logging, analytics — 2.8)

// logout bo'lganda cart ham tozalansin (boshqa slice action'iga reaksiya):
const cartSlice = createSlice({
  name: "cart",
  initialState: { items: [] } as CartState,
  reducers: { /* add, remove... */ },
  extraReducers: (builder) => {
    builder.addCase(logout, (state) => {        // auth slice'ning logout action'iga
      state.items = [];                          // logout  savat tozalansin
    });
  },
});
//  extraReducers — boshqa slice action'iga reaksiya (slice'lar koordinatsiyasi — 2.7)

import { configureStore } from "@reduxjs/toolkit";
import authReducer from "../features/auth/authSlice";
import cartReducer from "../features/cart/cartSlice";
import productsReducer from "../features/products/productsSlice";

export const store = configureStore({
  reducer: {
    auth: authReducer,
    cart: cartReducer,
    products: productsReducer,
  },
  middleware: (getDefault) =>
    getDefault({
      serializableCheck: { ignoredActions: ["persist/PERSIST"] },   // ba'zi action'larni e'tiborga olmaydi
    }),
});
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
//  Feature-based: har slice o'z papkasida, store'da birlashadi (2.3)

// CLIENT STATE — qaysi vosita:

// 1. Kam o'zgaradigan global  Context 12.1-bob:
//    theme, locale, auth — Context yetadi (oddiy)

// 2. Oddiy global state  Zustand (12.5 — kam boilerplate):
//    const useStore = create((set) => ({ count: 0, inc: () => set(s => ({count: s.count+1})) }))

// 3. Katta/murakkab/jamoaviy  Redux Toolkit (bu bob):
//    ko'p slice, DevTools, middleware, qat'iy struktura

// SERVER STATE — Redux EMAS:
// 4. API ma'lumoti  RTK Query 12.3-bob yoki TanStack Query 12.4-bob:
//    kesh, fonda yangilash, qayta urinish — AVTOMATIK (Redux thunk'dan yaxshiroq)

//  To'g'ri vosita: kamContext, oddiyZustand, kattaRedux, serverQuery (2.11, 12.1: 2.10)

import { createSlice, nanoid, createListenerMiddleware } from "@reduxjs/toolkit";

// prepare — payload'ga id/timestamp qo'shish (reducer SOF qoladi):
const todosSlice = createSlice({
  name: "todos",
  initialState: [] as Todo[],
  reducers: {
    addTodo: {
      reducer: (state, action: PayloadAction<Todo>) => { state.push(action.payload); },
      prepare: (text: string) => ({
        payload: { id: nanoid(), text, done: false, createdAt: Date.now() },  // hosilaviy maydonlar
      }),
    },
  },
});
export const { addTodo } = todosSlice.actions;
// dispatch(addTodo("Non olish"))   prepare id/createdAt/done qo'shadi

// listener middleware — logout'ga reaksiya (side effect — thunk'ning muqobili):
export const listenerMiddleware = createListenerMiddleware();
listenerMiddleware.startListening({
  actionCreator: logout,                         // logout dispatch bo'lganda...
  effect: async (_action, api) => {              // ...bu effekt ishlaydi
    localStorage.removeItem("token");            // side effect (tozalash)
    api.dispatch(clearCart());                   // boshqa action ham chaqirish mumkin
  },
});
// store'ga: middleware: (gd) => gd().prepend(listenerMiddleware.middleware)
//  prepare — payload tayyorlash; listener — action'ga reaksiya (2.12)

import { shallowEqual } from "react-redux";

function UserBadge() {
  //  har safar yangi obyekt  har render re-render:
  // const { name, avatar } = useAppSelector(s => ({ name: s.auth.user?.name, avatar: s.auth.user?.avatar }));

  //  1-yo'l: shallowEqual (sayoz solishtir — maydonlar bir xil bo'lsa render yo'q):
  const { name, avatar } = useAppSelector(
    (s) => ({ name: s.auth.user?.name, avatar: s.auth.user?.avatar }),
    shallowEqual
  );

  //  2-yo'l (odatda afzal): alohida primitiv selektorlar:
  // const name = useAppSelector(s => s.auth.user?.name);
  // const avatar = useAppSelector(s => s.auth.user?.avatar);

  return <div><img src={avatar} alt="" /> {name}</div>;
}
//  Obyekt qaytaruvchi selektor  shallowEqual yoki alohida selektor (ortiqcha render — 2.10)

// --- redux-persist (holatni localStorage'ga saqlash) ---
import { combineReducers, configureStore } from "@reduxjs/toolkit";
import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";        // localStorage

const rootReducer = combineReducers({ cart: cartReducer, auth: authReducer });
const persistConfig = { key: "root", storage, whitelist: ["cart", "auth"] };  // faqat shu slice'lar
const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = configureStore({
  reducer: persistedReducer,
  middleware: (gd) =>
    gd({ serializableCheck: { ignoredActions: ["persist/PERSIST", "persist/REHYDRATE"] } }),
});
export const persistor = persistStore(store);
// React: <PersistGate loading={null} persistor={persistor}><App/></PersistGate>

// --- test (Vitest/Jest) — sof reducer  mock kam, test oson ---
import { describe, it, expect } from "vitest";
import counterReducer, { increment, incrementByAmount } from "./counterSlice";

describe("counterSlice", () => {
  it("increment 1 ga oshiradi", () => {
    expect(counterReducer({ value: 0 }, increment())).toEqual({ value: 1 });
  });
  it("incrementByAmount payload qo'shadi", () => {
    expect(counterReducer({ value: 2 }, incrementByAmount(5))).toEqual({ value: 7 });
  });
});

// thunk holatlarini reducer'ga to'g'ridan uzatib tekshirish:
it("fetchUsers.fulfilled items'ni to'ldiradi", () => {
  const initial = { items: [], loading: true, error: null };
  const next = usersReducer(initial, fetchUsers.fulfilled([{ id: "1", name: "Ali" }], "req"));
  expect(next.loading).toBe(false);
  expect(next.items).toHaveLength(1);
});
//  redux-persist — holat saqlash (whitelist); reducer sof  test oddiy (2.13)

 qo'lda Redux (action type konstanta, switch reducer — boilerplate)
 Redux Toolkit (createSlice — avtomatik — 2.4)

 createSlice tashqarisida mutatsiya (Immer yo'q — buziladi — 2.5)
 createSlice ICHIDA mutatsiya OK (Immer); tashqarida yangi nusxa

 useSelector(s => s.items.filter(...))  (har render yangi massiv — 2.10)
 createSelector (memoized)

 createAsyncThunk + slice'da API ma'lumoti saqlash (qo'lda kesh — 12.1: 2.10)
 RTK Query / TanStack Query (avtomatik kesh — 12.3, 12.4)

 har kichik UI holati Redux'da (boilerplate, ortiqcha)
 lokal  useState; global  Redux (faqat kerakli — 2.1)

 useSelector((s: any) => ...)  (type yo'q)
 useAppSelector (typed — RootState — 2.11)