鐵人檔案
1. Extended State 前面學習到的 FSM ，我們透過枚舉、列舉 (Enumerate)，一個狀態機內所有可能的狀態，狀態機被提供的狀態是有限(F...
問題延伸 1. 請問如何動態載入不同的 context ? 比如說我們這台狀態機想要給許多不同的店家共用，比如「綠洲酒吧」、「蘋果旗艦店」... 難道我需要一直...
還記得我們在 Day 13 的例子嗎？ 有個 Input 的 UI 元件，且它有以下 [Invalid / Valid]、[Disabled / Enabled...
還記得我們在 Day 14 的例子嗎？ 這是一個比較符合現實情境的 Input 元件狀態，只有當 input content 有改變時， valid / i...
還記得我們在 Day 15 曾經介紹過 Guard 嗎？ 今天要來跟大家分享如何在 XState 中使用 Guard 保護狀態轉移 const someMach...
還記得在 Day 15 馬克杯 裝水 Guard 的例子嗎？ 另外一組例子，一個水瓶或是馬克杯的狀態一開始是『空的』，有「裝水」這個事件，每次要裝水時，都會當...
先前我們介紹過了階層式狀態，讓我們能將一個狀態向下描述得更精確，比如以之前的 input 元件狀態機當 input 是 changed 時，可以更向下描述，這個...
前面介紹許多 State Machine 及 XState 的功能，由於篇幅不多了，今天想跟大家先快速的介紹一下在 React 中如何使用 XState。 快速...
1. XState as Global State in React 在 React 提到 Global State 時，大家很常會想到 React conte...
說到學習資源，最容易學習的方式就是從母語開始 中文文章 Jerry Hong 的部落格Jerry 在前端社群相當樂於分享，也是之前鐵人賽的冠軍，其文筆及範例、說...
