Redux Devtools rozšíření a Laco

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. :)