Lekce 15 · Ekosystém

Správa stavu aplikace

Druhy stavu a jak vybrat: Context vs. Zustand vs. Redux Toolkit.

Než začneme: stěhování do nového bytu

Když se stěhuješ, nenaházíš všechno do jedné obří skříně v předsíni. Mléko dáš do lednice, klíče do kapsy, dokumenty do šanonu a společné věci – třeba koření – do spíže, kam sahá celá rodina. Každá věc má místo podle toho, jak se s ní zachází.

Otázka „Redux, nebo Zustand?“ je jako otázka „jakou obří skříň do předsíně koupit?“. Většina stavu v aplikaci do žádné globální skříně nepatří. Za celý kurz už jsme poznali pět míst a každé se hodí na jiný druh stavu:

Druh stavu	Jako v domácnosti	Příklad	Kam s ním
Serverový	Potraviny v lednici: koupené, s trvanlivostí	Produkty, uživatelé, objednávky	TanStack Query / RTK Query / loadery
V adrese	Adresa na obálce	Filtry, stránka, vybraná záložka, hledání	Router (search params)
Formulářový	Papíry na pracovním stole	Hodnoty polí, chyby, odesílání	useState / Actions / React Hook Form
Lokální UI	Věci v kapse	Otevřený modal, rozbalená sekce	useState / useReducer v komponentě
Sdílený klientský	Společná spíž	Přihlášený uživatel, téma, košík, rozpracovaný editor	Context, Zustand, Redux…

1. Roztřiď stav jedné stránky

Vezmi stránku e-shopu: seznam produktů s filtrem kategorie a hledáním, tlačítko „Do košíku“, ikonka košíku v hlavičce, rozbalovací detail produktu a přepínač tmavého režimu. Projdeme každý kousek stavu a zeptáme se, kam patří:

Stav	Otázka	Kam
Seznam produktů	Patří serveru a může se tam změnit?	TanStack Query
Vybraná kategorie, hledaný text	Má přežít poslání odkazu?	Search params
Rozbalený detail produktu	Zajímá to někoho jiného než tuhle kartu?	useState v kartě
Obsah košíku	Potřebuje ho hlavička i stránka, mění se často?	Zustand / Redux
Tmavý režim	Potřebuje ho všechno, mění se zřídka?	Context (nebo i Zustand)
Počet položek v košíku	Dá se spočítat z obsahu košíku?	Nikam – spočítej ho (selektor)

Z šesti věcí jen jedna (košík) opravdu potřebuje sdílený store. To je typické.

2. Proč na košík nestačí Context

Vzpomeň si na lekci o Contextu: Context je rozhlas. Když se změní hlášení, poslouchat musí všichni. Kdyby byl košík v Contextu, každé přidání produktu by překreslilo všechny komponenty, které košík čtou – i tlačítka „Do košíku“, která chtějí jen funkci add.

Store knihoven jako Zustand a Redux funguje spíš jako odběr zpráv na míru. Každá komponenta si řekne, co přesně ji zajímá – „jen počet kusů“, „jen celková cena“, „jen funkce add“ – a dostane zprávu, jen když se změní tohle. Té funkci, která z celého stavu vybere jen to potřebné, se říká selektor:

const count = useCartStore((state) => state.items.length)   // „pošli mi jen počet“

Po každé změně store zavolá selektor a porovná výsledek s minulým. Když je stejný, komponenta se nepřekreslí.

3. Zustand: malý store bez Provideru

import { create } from 'zustand'

interface CartStore {
  items: { product: Product; qty: number }[]
  add: (product: Product) => void
  clear: () => void
}

const useCartStore = create<CartStore>()((set) => ({
  items: [],                                          // stav
  add: (product) =>                                   // akce
    set((state) => ({ items: [...state.items, { product, qty: 1 }] })),
  clear: () => set({ items: [] }),
}))

create vytvoří store i hook useCartStore najednou. Žádný Provider – store žije mimo React a kdokoli si ho může „předplatit“.
Stav i akce jsou v jednom objektu. set funguje jako setter z useState: dostane předchozí stav a vrátí změny (Zustand je sloučí se zbytkem).
Platí pravidla z lekce o stavu: neměň, nahrazuj.

Komponenty kdekoli ve stromu si vyberou, co potřebují:

function AddButton({ product }: { product: Product }) {
  const add = useCartStore((s) => s.add)              // funkce se nikdy nemění
  return <button onClick={() => add(product)}>Do košíku</button>
}

function CartBadge() {
  const count = useCartStore((s) => s.items.reduce((n, i) => n + i.qty, 0))
  return <span>🛒 {count}</span>
}

Co se stane po kliknutí na „Do košíku“:

add(product) zavolá set a store má nový stav.
Store obejde všechny odběratele a každému zavolá jeho selektor.
CartBadge: počet byl 0, teď je 1 → překreslí se.
AddButton: funkce add je pořád ta samá → nepřekreslí se.

Ukázka

Košík v Zustandu se selektory

Co vidíš: Tři komponenty, které sdílejí jeden store košíku: tlačítka na přidání, odznak s počtem kusů a celková cena. Každá karta žlutě blikne, když se překreslí.

Vyzkoušej:

Klikni na přidání jakéhokoli produktu. Bliknou CartBadge a CartTotal – změnil se počet i cena. AddButtons nebliká: odebírá jen funkci add.
Přidej ještě několik produktů. AddButtons nebliká nikdy.
Klikni na Vyprázdnit. Počet i cena se vrátí na nulu a obě karty bliknou.

Co z toho plyne: Každá komponenta dostane zprávu jen o tom, co si vybrala selektorem. Žádný Provider a žádné zbytečné překreslování.

Načítám interaktivní část…

Zustand umí přidat užitečné schopnosti přes tzv. middleware:

import { persist, devtools } from 'zustand/middleware'

const useSettings = create<Settings>()(
  devtools(                                   // napojení na Redux DevTools
    persist(                                  // ukládání do localStorage
      (set) => ({ theme: 'light', setTheme: (theme) => set({ theme }) }),
      { name: 'settings' },
    ),
  ),
)

// Čtení a zápis i mimo React (v utilitách, v testech)
useSettings.getState().setTheme('dark')

4. Redux Toolkit: bankovní účet celé aplikace

V lekci o reduceru jsme si vysvětlili bankovní účet: nikdo nepřepisuje zůstatek, všichni jen hlásí transakce a nový stav spočítá jedno místo podle pravidel. Redux je přesně tohle, jen pro celou aplikaci: jeden store, akce, reducery – a k tomu výpis všech transakcí v Redux DevTools.

Redux Toolkit (RTK) je moderní, oficiální způsob psaní Reduxu. Ubírá většinu opakujícího se kódu:

const todosSlice = createSlice({
  name: 'todos',
  initialState: { items: [] as Todo[] },
  reducers: {
    added(state, action: PayloadAction<string>) {
      state.items.push({ id: Date.now(), text: action.payload, done: false })
    },
    toggled(state, action: PayloadAction<number>) {
      const todo = state.items.find((t) => t.id === action.payload)
      if (todo) todo.done = !todo.done
    },
  },
})

export const { added, toggled } = todosSlice.actions      // akce se vygenerují samy
const store = configureStore({ reducer: { todos: todosSlice.reducer } })

createSlice = kus stavu + jeho reducery. Z názvů reducerů vytvoří i akce (added('Nakoupit') → { type: 'todos/added', payload: 'Nakoupit' }).
Ale vždyť to mutuje! Jen naoko. RTK uvnitř používá knihovnu Immer: zapisuješ do „návrhu“ a Immer z toho vyrobí nový neměnný stav. Pravidlo „neměň, nahrazuj“ tedy platí dál – jen ho za tebe hlídá Immer.
configureStore poskládá slices do jednoho store a zapne DevTools.

V komponentách se store čte selektory a mění akcemi:

function TodoApp() {
  const todos = useAppSelector((s) => s.todos.items)     // odběr jen téhle části
  const dispatch = useAppDispatch()
  return <button onClick={() => dispatch(added('Nový úkol'))}>Přidat</button>
}

// Odvozená data: createSelector je zapamatuje a přepočítá jen při změně vstupů
const selectActive = createSelector([(s: RootState) => s.todos.items], (items) => items.filter((t) => !t.done))

Ukázka

Úkoly v Redux Toolkit

Co vidíš: Seznam úkolů ve store Redux Toolkit: slice s akcemi added, toggled a filterChanged, typované hooky a zapamatovaný selektor pro viditelné úkoly.

Vyzkoušej:

Přidej dva úkoly a jeden zaškrtni.
Zapni Jen nehotové. Hotový úkol zmizí – selektor selectVisibleTodos spočítal viditelné úkoly z items a filter.
Máš-li v prohlížeči rozšíření Redux DevTools, otevři ho. Uvidíš výpis všech akcí a můžeš se vracet v čase – výpis z bankovního účtu.

Co z toho plyne: Redux Toolkit je reducer z lekce 5 pro celou aplikaci: akce popisují, co se stalo, slice rozhoduje, jak se změní stav, a selektory vybírají, co kdo potřebuje.

Načítám interaktivní část…

Jak se v Reduxu načítají data – createAsyncThunk a extraReducers (výzva Async thunk)?

Reducer musí být čistý, takže fetch do něj nepatří (lekce o reduceru). Načítání proto běží v thunku: funkci, která poběží mimo reducer a během práce posílá akce. createAsyncThunk ho vyrobí za tebe a sám pošle tři akce:

const loadProducts = createAsyncThunk('products/load', (query: string) => fetchProducts(query))
// dispatch(loadProducts('jab')) pošle:
//   'products/load/pending'    → hned na začátku
//   'products/load/fulfilled'  → po úspěchu, payload = výsledek fetchProducts
//   'products/load/rejected'   → po chybě, action.error.message = hláška

Tyhle akce nevznikly ve slice (nejsou v jeho reducers), proto se na ně slice reaguje v extraReducers, tedy „reaguj i na cizí akce“:

extraReducers: (builder) => {
  builder
    .addCase(loadProducts.pending, (state) => { state.status = 'loading' })
    .addCase(loadProducts.fulfilled, (state, action) => {
      state.status = 'succeeded'
      state.items = action.payload        // typ payloadu se odvodí z thunku
    })
    .addCase(loadProducts.rejected, (state, action) => {
      state.status = 'failed'
      state.error = action.error.message
    })
}

Je to stavový automat z lekce o reduceru (idle → loading → succeeded/failed), jen akce posílá thunk.

5. Jak vybrat

	Context + useReducer	Zustand	Redux Toolkit
Přirovnání	Rozhlas	Odběr zpráv na míru	Bankovní účet s výpisem
Instalace / opakující se kód	Nic / střední	Malá / minimální	Střední / víc struktury
Selektory (jemné odběry)	❌ překreslí všechny posluchače	✅	✅ (+ zapamatované selektory)
DevTools, cestování v čase	❌	✅ přes middleware	✅ vestavěné
Serverová data	❌	❌ (kombinuj s TanStack Query)	✅ RTK Query
Kdy	Málo se měnící data: téma, uživatel, jazyk	Střední aplikace, rychlý start, málo pravidel	Velké aplikace a týmy, složitá logika, audit akcí

Ověř si to

Kvíz Seznam produktů z API, filtr podle kategorie a obsah košíku. Kam co patří?

Vše do ReduxuProdukty → TanStack Query, filtr → adresa, košík → Zustand/ContextVše do ContextuProdukty → useState, filtr → Zustand, košík → adresa

Kvíz Proč se v Zustandu komponenta s useStore(s => s.add) nepřekreslí, když se změní items?

Zustand nepřekresluje nikdySelektor vrací funkci add, která se nemění – Zustand porovná výsledek selektoru a render přeskočíProtože add je asyncKvůli memo

Kvíz V Redux Toolkit píšeš v reduceru state.items.push(todo). Porušuješ tím pravidlo neměnnosti?

Ano, je to chybaNe – createSlice používá Immer, který z „mutace“ návrhu vyrobí nový neměnný stavJen ve vývojovém režimu

Rozcvička

Výzva

Počítadlo v Zustandu

Rozcvička

Dvě komponenty, jeden společný store. Doplň akci a čtení stavu.

Zadání (stejný text je v komentáři na začátku souboru)

VÝZVA: Počítadlo v Zustandu

Store má `count` a akci increment, která zatím nic nedělá.
Display a Buttons jsou dvě různé komponenty – sdílejí stav přes store, bez props.

1. Ve store doplň increment: set((s) => ({ count: s.count + 1 }))
2. V Display si count přečti selektorem: const count = useCounter((s) => s.count)

Načítám interaktivní část…

Mám hotovo

Výzvy

První výzva procvičí kapitolu 3: oblíbené produkty se nesou přes props přes několik komponent – přesuň je do Zustandu a přidej ukládání. Druhá rozšíří kapitolu 4 o asynchronní načítání v Reduxu.

Výzva

Oblíbené v Zustandu s persist

Střední Bonusová výzva

Z nošení vzkazu přes celou školu na odběr zpráv na míru – a s ukládáním do localStorage.

🔒 Bonusová výzva

Střední a těžké výzvy jsou bonus pro přihlášené. Registrace je zdarma – stačí e-mail, žádné heslo.

Výzva

Async thunk v Redux Toolkit

Těžká Bonusová výzva

Kompletní asynchronní tok v Reduxu: pending → fulfilled/rejected (pračka z lekce o reduceru), typované hooky a zapamatovaný selektor.

🔒 Bonusová výzva

Střední a těžké výzvy jsou bonus pro přihlášené. Registrace je zdarma – stačí e-mail, žádné heslo.

Shrnutí

Nejdřív roztřiď stav jako věci při stěhování: serverový, v adrese, formulářový, lokální, sdílený klientský.
Serverová data do TanStack Query, filtry do adresy – globálního stavu pak zbyde málo.
Context je rozhlas – stačí pro málo se měnící data. Pro časté změny chceš selektory.
Zustand: odběr na míru, minimum kódu, žádný Provider, persist. Redux Toolkit: bankovní účet celé aplikace, struktura, DevTools, RTK Query.
Selektory vracej jednoduché hodnoty nebo stabilní reference (useShallow, createSelector).

Načítám lekci…

💬 Našel jsi chybu, něco ti není jasné, nebo máš nápad? Napiš mi.