複雜系統的狀態轉換

Modern user flows

State Management

with XState

一種常見的 Pattern

const App = () => {
   const { data, isLoading, isSuccess, isError, error } = useGetPostsQuery()
   if(isLoading) return <LoadingSpinner />
   if(isError) return <ErrorContentBlock message={error.message} />
   if(isSuccess) return <PostGallery posts={data || []} />
   
   return <IdleBlock />
}

How Many Flags?

State of loading Post

idle

success

failure

fetch

讓我們來消滅 Flags

const App = () => {
   const { data, status, error } = useGetPostsQuery()
   if(status === 'loading') return <LoadingSpinner />
   if(status === 'failure') return <ErrorContentBlock message={error.message} />
   if(status === 'success') return <PostGallery posts={data || []} />
   
   return <IdleBlock />
}

How to change status?

Flow of loading Post

idle

success

failure

fetch

FETCH

RESOLVE

REJECT

RETRY

Behind The Scenes

const useGetPostsQuery = () => {
  const [data, setData] = useState([]);
  const [error, setError] = useState();
  const [status, setStatus] = useState("idle");

  useEffect(() => {
    async function getPosts() {
      setStatus("loading");
      try {
        const res = await fetchPosts();
        setData(res);
        setStatus("success");
      } catch (err) {
        setError(err);
        setStatus("failure");
      }
    }
    
    getPosts();
  }, []);

  return { data, status, error };
};

What about retry?

Transition relies on
Promise

Flow of loading Post

idle

success

failure

fetch

FETCH

RESOLVE

REJECT

RETRY

state

event

state

event

nextState = f ( previousState, event )

What we have?

What we need?

f is so called transition

Brainstorming

Finite State Machine is your savior

一個初始狀態 (Initial State)

ref : The Finite State of Reactive Animations

有限狀態機

idle

success

failure

FETCH

RESOLVE

REJECT

RETRY

一組有限數量的狀態 (States)

一組有限數量的事件 (Events)

一組轉移紀錄 (Transitions)

一組有限數量的結束狀態 (Final States)

Flow of loading Post

How to develop

img: https://craftpix.net/freebies/2d-game-police-character-free-sprite-sheets/

How to develop

img: https://craftpix.net/freebies/2d-game-police-character-free-sprite-sheets/

按下 ⇦、⇨ 可控制玩家移動
按下 B 是跳躍
長按 ⇩ 是臥倒 → 放開 ⇩ 是起身

先從移動模組開工好了...

按下 B 是跳躍

https://gameprogrammingpatterns.com/state.html

  if(input == PRESS_B){
+   if(!isJumping){
+     isJumping = true
      ...運算座標、展示跳躍圖片
+   }
  }

防止 Air Jumping

跳躍中
isJumping

https://gameprogrammingpatterns.com/state.html

  if(input == PRESS_B){
    if(!isJumping){
      isJumping = true
      ...運算座標、展示跳躍圖片
    }
- }  
+ } else if(input == PRESS_DOWN){
+   if(!isJumping){
+     ...運算座標、展示匍匐圖片
+   }
+ }

跳躍時不能臥倒

長按 ⇩ 是臥倒

https://gameprogrammingpatterns.com/state.html

  if(input == PRESS_B){
    if(!isJumping){
      isJumping = true
      ...運算座標、展示跳躍圖片
    }  
  } else if(input == PRESS_DOWN){
    if(!isJumping){
+     isCrawling = true
      ...運算座標、展示臥倒圖片
    }
- }
+ } else if (input == RELEASE_DOWN){
+   if(isCrawling){
+     isCrawling = false
+     ...運算座標、展示站立圖片
+   }
+ }

何以鑑別起身、臥倒

放開 ⇩ 是起身

臥倒中
isCrawing

https://gameprogrammingpatterns.com/state.html

  if(input == PRESS_B){
-   if(!isJumping){
+   if(!isJumping && !isCrawling){
      isJumping = true
      ...運算座標、展示跳躍圖片
    }  
  } else if(input == PRESS_DOWN){
    if(!isJumping){
      isCrawling = true
      ...運算座標、展示臥倒圖片
    }
  } else if (input == RELEASE_DOWN){
    if(isCrawling){
      isCrawling = false
      ...運算座標、展示站立圖片
    }
  }

臥倒不能直接跳躍

還要注意什麼？

https://gameprogrammingpatterns.com/state.html

  if(input == PRESS_B){
    if(!isJumping && !isCrawling){
      isJumping = true
      ...運算座標、展示跳躍圖片
    }  
  } else if(input == PRESS_DOWN){
    if(!isJumping){
      isCrawling = true
      ...運算座標、展示臥倒圖片
    }
  } else if (input == RELEASE_DOWN){
    if(isCrawling){
      isCrawling = false
      ...運算座標、展示站立圖片
    }
  }

心累......

夠複雜嗎？

https://gameprogrammingpatterns.com/state.html

心累......

夠複雜嗎？

不符合開放封閉原則

隨著功能增加

犯錯率上升

可讀性下降

溝通成本提高

除錯難度上升

換個角度觀察

1. 獨立的狀態

2. 舊狀態 → 新狀態，

有明確轉移路徑

How about 有限狀態機

Flowchart vs State Diagram

移動模組

實作 FSM

function fetchReducer(state, event){
  switch (state) {
    case 'idle':
      switch (event.type) {
        case 'FETCH':
          return 'loading';
        default:
          return state;
      }
    case 'loading':
      switch (event.type) {
        case 'RESOLVE':
          return 'success';
        case 'REJECT':
          return 'failure';
        default:
          return state;
      }
    case 'success':
      switch (event.type) {
        default:
          return state;
      }
    case 'failure':
      switch (event.type) {
        case 'RETRY':
          return 'loading';
        default:
          return state;
      }
    default:
      return state;
  }
}

1. 有限的狀態

2. 有限的事件

3. 舊狀態 → 新狀態，

有明確轉移路徑

ref : The Finite State of Reactive Animations

實作 FSM

const machine = {
  states: {
    idle: {
      on: {
        FETCH: 'loading'
      }
    },
    loading: {
      on: {
        RESOLVE: 'success',
        REJECT: 'failure'
      }
    },
    success: {
      type: 'final'
    },
    failure: {
      on: {
        RETRY: 'loading'
      }
    }
  }

1. 有限的狀態

2. 有限的事件

3. 舊狀態 → 新狀態，

有明確轉移路徑

const transition = (state, event) => {
  return machine
    .states[state] // 當前的狀態
    .on[event]     // 事件後要轉移的狀態
    || state;      // or 原狀態
}

ref : The Finite State of Reactive Animations

const machine = {
  states: {
    idle: {
      on: {
        FETCH: 'loading'
      }
    },
    loading: {
      on: {
        RESOLVE: 'success',
        REJECT: 'failure'
      }
    },
    success: {
      type: 'final'
    },
    failure: {
      on: {
        RETRY: 'loading'
      }
    }
  }

XState

ref : The Finite State of Reactive Animations

import { createMachine } from 'xstate'
const machine = createMachine ({
  states: {
    idle: {
      on: {
        FETCH: 'loading'
      }
    },
    loading: {
      on: {
        RESOLVE: 'success',
        REJECT: 'failure'
      }
    },
    success: {
      type: 'final'
    },
    failure: {
      on: {
        RETRY: 'loading'
      }
    }
  })