Redux: predikovatelný state management pro React

Dan Abramov představil Redux — minimalistickou knihovnu pro správu stavu aplikací inspirovanou Flux architekturou a Elm. Principy, pattern a praktické použití.

Od Flux chaosu k eleganci¶

Facebook představil Flux jako architektonický pattern pro jednosměrný tok dat v React aplikacích. Problém? Existuje 15+ implementací a žádná není jednoznačně nejlepší.

Redux od Dana Abramova zjednodušuje Flux na tři principy:

• Single source of truth** — celý stav aplikace v jednom objektu (store)
• State is read-only** — jediný způsob změny je dispatch akce
• Pure functions** — změny stavu popisují čisté funkce (reducery)

Reducery a akce¶

Redux reducer je čistá funkce: (state, action) => newState

function todosReducer(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, { text: action.text, completed: false }];
    case 'TOGGLE_TODO':
      return state.map((todo, i) =>
        i === action.index ? { ...todo, completed: !todo.completed } : todo
      );
    default:
      return state;
  }
}

// Dispatch akce
store.dispatch({ type: 'ADD_TODO', text: 'Naučit se Redux' });

Žádné side effecty, žádné mutace — stav je vždy predikovatelný.

DevTools a time-travel debugging¶

Největší wow faktor Redux je time-travel debugging. Protože každá změna stavu je popsána akcí a reducery jsou čisté funkce, můžete:

• Přehrát historii akcí krok po kroku
• Vrátit se v čase na libovolný stav
• Exportovat a importovat sekvenci akcí pro reprodukci bugů
• Hot-reloadovat reducery bez ztráty stavu

Redux DevTools browser extension je game-changer pro debugging komplexních aplikací.

Middleware a asynchronní operace¶

Redux middleware rozšiřuje dispatch pipeline:

• redux-thunk** — asynchronní akce jako funkce
• redux-saga** — side effecty přes generátory
• redux-logger** — logování akcí v konzoli

Pro API volání doporučujeme standardizovaný pattern s akcemi REQUEST/SUCCESS/FAILURE pro každou operaci.

Závěr: standard pro komplexní React aplikace¶

Redux přináší do React ekosystému řád a predikovatelnost. Pro malé aplikace může být overkill, ale pro enterprise projekty s komplexním stavem je neocenitelný. Kombinace s React DevTools tvoří nejlepší debugging experience v celém frontendu.