Pro krátké představení Laca se prosím podívejte na můj předchozí příspěvek.
Získání přehledu o akcích, o jejich spuštění a o tom, co se stane s objektem globálního stavu, může skutečně pomoci odladit složitý a velký projekt.
Redux Devtools je rozšíření, které poskytuje uživatelské rozhraní, kde můžete získat přehled o akcích. Můžete dokonce přeskočit a přejít na akce, které se obvykle nazývají „cestování časem“. Můžete také vidět globální stav celé aplikace a podívat se do každého obchodu. Globální stav se dokonce změní, když přeskočíte mezi akcemi.
Redux Devtools funguje hned po vybalení s Laco ve vývojovém režimu. Chybí jen některé funkce, které byste normálně měli při používání Reduxu. Ačkoli Laco pracuje s nejdůležitějšími funkcemi, jako je cestování v čase a schopnost nahlížet do objektu globálního stavu.
Laco je podobný Reduxu a v zákulisí působí v globálním státě. Každému obchodu bylo přiděleno jedinečné ID objektu globálního stavu, které si můžete prohlédnout v Redux Devtools. Globální stav můžete získat také takto:
import { Store, getGlobalState } from 'laco'
const CounterStore = new Store({ count: 0 })
const ToggleStore= new Store({ toggle: false })
getGlobalState()
// Outputs an object:
// {
// "0": { count: 0 },
// "1": { toggle: false },
// }
Abychom viděli, které akce patří k jakým obchodům, musíme inicializovat obchod s daným názvem:
import { Store } from 'laco'
const CounterStore = new Store({ count: 0 }, "CounterStore")
Jinak byste v nástrojích Devtools viděli pouze název akce, ale ne, který ukládá změnu akce.
Aby se daná akce skutečně zobrazila v nástrojích Devtools, musíte ji také pojmenovat při volání set()
v obchodě:
import { Store } from 'laco'
const CounterStore = new Store({ count: 0 }, "CounterStore")
// Implementing some actions to update the store
const increment = () => CounterStore.set(state => ({ count: state.count + 1 }), "Increment");
const decrement = () => CounterStore.set(state => ({ count: state.count - 1 }), "Decrement");
Protože se jedná o řetězec předaný druhému argumentu set()
V případě potřeby můžete dokonce poskytnout více informací - nemusí to být "jméno".
To je v podstatě vše! Níže je GIF ukazující schopnosti Redux Devtools:
Podívejte se na karanténu kódu a vyzkoušejte si to sami. :)