[筆記] XState React 設計登入模式筆記

Posted onAuthorANDY LIEN

章節連結
  • Reference

    • 觀察前輩如何設計登入流程這個環節，以下是閱讀心得。
    react logo

    必備知識

    關於在各個元件中傳值

    這點要利用 React CreateContext 內的 Provider 和 Consumer 。將要綁定的值放在 <Provider> 的 value 中，然後其內的所有子元件，可以用 <Consumer> 來取得值。由於是「訂閱」的概念，所以當 Provider 一改動時，Consumer 的內容會即時更改。因此僅將不常變動的值放在 CreateContext 的物件中，以免造成多次渲染的問題。

    用 useContext 語法糖可以以較為優雅的方式，取得 createContext 的「回傳值」，無需再包覆在 <Consumer> 中才能拿到內容。

    1. 提供自訂的 Provider

    為了讓 JSX 元件能夠提供其他包覆的子 JSX 元件內容

    1. 提供自訂的 hooks

    為了在子元件中的 hook 中可以訂閱取得 createContext 內容，所以可寫一個 hook 來回傳 useContext 的內容

    XState 登入流程範例

    狀態儘量拆細一點，後續會比較好調整，像是「檢查是否為登入」也可以是一個狀態。 每次載入時，都從「檢查是否為登入」當作進入點，這就是一個全局的路由守衛 predictableActionArguments: true 可以確保當一個 action 被執行時，它會接收到的事件參數會是引發當前狀態轉換的事件。

    「檢查是否為登入」的邏輯概略是撰寫在 always 中：

    1. 檢查 localStorage 是否有 token?
      1. 如果有那就直接對應的 action，將 token 塞入 context，再將狀態轉到「權限取得」
      2. 如果沒有那就忽略此項目，執行下一個項目
    2. 判斷是否網址列中是否有第三方登入傳來的 code?
      1. 如果有，那就將狀態轉到「獲取 token」，執行對應動作。完畢後，再將狀態轉到「權限取得」
      2. 如果沒有那就忽略此項目，執行下一個項目
    3. 如果非 local 開發環境，那就將狀態轉到「開發用登入」。若否，那就忽略此項目，執行下一個
    4. 最後的預設狀態，就是導向第三方登入

    如此一來，就是一個完整的登入流程

    注意事項

    命名

    1. 無論是 function, state, event, action 都要以「裡面做什麼事情」去做最簡潔明瞭的命名

    狀態機

    1. 先寫 states 空殼去過一下整個流程，確認符合商業邏輯而且「沒有無限迴圈」後，才開始慢慢補上 actions, services 的實作
    2. States 的排序盡量是以 user flow 的順序去排

    Reference

    1. https://medium.com/hannah-lin/react-hook-筆記-usecontext-4bc289976847
    2. https://xstate.js.org/docs/guides/actions.html#api
    按讚加入粉絲團

    延伸閱讀