Redux - je to Knihovna pro správu stavu aplikace v JavaScriptu. Jedním ze základních pojmů v Reduxu je dispatch. Dispatch je funkce, která se používá k odesílání událostí (akcí) ke zpracování v Reduxu.
Dispatch plní roli prostředníka mezi komponenty a reduxery, které mění stav aplikace. Když komponenta vyvolá dispatch a předá mu událost, Redux tuto událost předá všem reduxerům. Ředkvičky přijímají události a na jejich základě mění stav.
Dispatch přijímá objekt-událost, která obsahuje dvě vlastnosti: type a payload. Typ události udává reduxerům, jakou změnu je třeba provést, a payload obsahuje data potřebná k provedení této změny.
Použití dispatch v Reduxu umožňuje zlepšit strukturu kódu a učinit jej předvídatelnějším. Umožňuje vám vytvořit jasný datový tok a usnadňuje sledování změn.
Co je dispatch v reduxu?
Akce je jednoduchý objekt, který popisuje událost, která se děje, a obsahuje minimálně dvě pole: type (řetězec, který popisuje typ akce) a payload (údaje potřebné k aktualizaci stavu).
Když je povolána funkce dispatch, přenáší akci na všechny registrované redesigny v aplikaci. Každý reduser přijme aktuální stav a akci a vrátí nový stav.
Pro příklad zvažte jednoduchý reducer, který zpracovává akci "INCREMENT" zvýšením počítadla o 1:
const initialState = ;function counterReducer(state = initialState, action) ;default:return state;>>Poté můžeme použít funkci dispatch poslat akci do reduceru:
dispatch(< type: 'INCREMENT' >);Reducer obdrží tuto akci a aktualizuje stav zvýšením počítadla o 1.
Dispatch je klíčový nástroj v Reduxu, který poskytuje jednosměrný datový tok a umožňuje aktualizaci stavu aplikace v reakci na události.
Jak to funguje?
Když zavoláme funkci dispatch, předáme ji akci jako objekt s polem "type". Akce může také obsahovat další užitečná data, jako jsou data pro aktualizaci stavu nebo data pro provádění asynchronních operací.
Když je dispatch vyvolán, Redux přenese akci a aktuální stav úložiště do funkce-reducer (reducer). Reduxer je čistá funkce, která přijímá aktuální stav a akci a vrací nový stav aplikace.
Dispatch také spouští proces aktualizace stavu v Reduxu. Když reduxer zpracuje akci, vytvoří a vrátí nový stavový objekt. Redux nahradí současný stav úložiště novým stavem a odešle upozornění všem předplatitelům (subscribers), že se stav změnil.
Všichni předplatitelé úložiště mohou sledovat změny stavu tím, že se přihlásí k odběru jeho aktualizací. Když je stav aktualizován, Redux vyvolá uložené sledovací funkce a předá jim nový stav. Všechny komponenty, které závisí na stavu Reduxu, tak mohou být aktualizovány s ohledem na tyto změny.
Použití dispatch nám umožňuje odesílat akce a aktualizovat stav v naší aplikaci. Je klíčovým konceptem v Reduxu a umožňuje nám spravovat stav aplikace na jednom místě, takže je Kód předvídatelnější a snadno sledovatelný.
Akce a typy akcí
Akce obsahují dvě povinná pole:
| Pole | Popis |
|---|---|
| type | Řetězec, který určuje typ akce. Obvykle se udává jako konstanta, aby se zabránilo překlepům při psaní kódu. |
| payload | Další informace předávané spolu s akcí. Může obsahovat veškeré údaje potřebné ke zpracování akce. |
const incrementCounter = (amount) => ;>;V tomto příkladu akce incrementCounter zvyšuje hodnotu čítače o dané množství. Typ akce je uveden jako INCREMENT_COUNTER a hodnota, na kterou má být měřič zvýšen, je přenášena do pole payload .
Typy akcí mají syntaktickou dohodu jako řádek napsaný velkými písmeny s podtrženími místo mezer. To umožňuje snazší identifikaci a zpracování různých typů akcí uvnitř reduxerů.
Vytvoření akce
K vytvoření akce v Reduxu používáme funkci (action creator), která vrací objekt akce. Tato funkce může přijímat možnosti, které budou zahrnuty do objektu akce.
| Krok | Příklad |
|---|---|
| 1 | Určete typ akce, která je řádkem a jedinečně identifikuje danou akci. Například "ADD_TODO " nebo"INCREMENT_COUNTER". |
| 2 | Vytvořte funkci generátor akce (action creator), která přijme požadované parametry a vrátí objekt akce. V objektu akce musí být nutně přítomno pole "type" s typem akce a mohou být přítomna další užitečná data. Například: |
| function addTodo(text) return type: 'ADD_TODO', text >; > | |
| 3 | K vytvoření akcí v kódu aplikace použijte vytvořenou funkci-generátor akce. Například: |
| const action = addTodo('Buy milk'); |
Vytváření akcí v Reduxu nám tedy umožňuje přenášet informace a specifikovat typ události, ke které došlo v aplikaci. Tyto akce budou odeslány do úložiště pomocí funkce dispatch a budou zpracovány podle konkrétních reducerů (reducers).
Zpracování akce
Při použití knihovny Redux jsou akce (actions) jednoduché objekty, které popisují, co se v aplikaci stalo. Když je akce vytvořena, přenese se do funkce dispatch.
Dispatch je metoda Redux Store, která bere akci jako argument. Je hlavní funkcí pro přenos akce mezi komponentami a úložištěm Redux. Když je dispatch vyvolán, přenese akci do ředkviček.
Reduxery jsou čisté funkce, které přijímají předchozí stav úložiště a akci a vracejí nový stav. Reduxery určují, jak bude každá akce zpracována a jak se změní stav aplikace.
Dispatch tak provádí následující pracovní cyklus:
- Vytvoří akci a přenese ji do funkce dispatch.
- Dispatch přenáší akci do redewserů.
- Ředkvičky zpracují akci a vrátí nový stav.
- Nový stav je uložen v úložišti Redux.
- Komponenty podepsané na úložišti obdrží aktualizovaný stav a v případě potřeby se znovu použijí.
Dispatch je tedy centrálním mechanismem v Reduxu pro správu stavu aplikace a poskytuje jednosměrný datový tok v aplikaci.