上回提到Main的作法之後，就要把前端做個完整的Prototype，讓前端歸前端，後端歸後端。
完整範例在此：eden-first-todo-list-app
全域變數的替代
在實作時遇到一些問題點：
- 依登入狀態跳頁，未登入時要跳回首頁
- 承上，【登入成功狀態】要在全體物件都能被看到
- 承上，【取回的使用者資料】要在全體物件都能被看到
但放在React裡要怎麼實現呢？
Hook的useContext可以達成這個目標，它可以讓垂直層的各個元件都能吃到最上層的變數。
簡明useContext運作流程：
- 在App(最上層)單元使用【createContext】建立Context物件，此例為【AuthContext】。
- App內則使用【useState】建立要被控制的變數，此例為【authState】。
- App內再使用【AuthContext.Provider】提供authState給底下各層使用，此例為【LoginForm、MainForm】。
- 底下各層物件【LoginForm、MainForm】則使用【useContext】把最上層的Context變數抓來操作，操作方式同useState。
處理後端API沒有的欄位
在登入後會從後端API下載TODO清單，但舊API並沒有包含前端要的IsEditing屬性，所以做了一點加工。
登入後立即要從後端下載，使用useEffect可以滿足這個需求。
後記
前端到此算告一段落，操作上可以模擬給使用者帶來的體驗，短短的幾行程式碼可是累積眾人智慧！之後會進入比較簡單的後端開發（終於）。
預計後端將會完成：
- LDAP（AD）連結與查詢。
- 資料庫連結。
- 前後端封包格式制定。（REST or GraphQL API）
以上提供給各位參考，我們下回繼續！
沒有留言:
張貼留言