2020-7-15 NgRx

[hsiaofung]

有哪些狀態要管理?

• 使用者狀態
• 購物車狀態
• 訊息狀態

如何管理狀態?

[hsiaofung]

你做了什麼?

• 定義行為表達事件
• 定義reducer 函數管理couter 的壯態。
• 註冊全域可用的狀態容器。
• 注入Store服務，發送行為和選擇counter當前的狀態。

[hsiaofung]

Actions

• 表達唯一的事件 : 例如: 用戶敲擊頁面、經由網路的事件、請求API。
• 幫助你了解事件如何被處理。

How to write Actions

• Action interface
  • [Source]Event
• 規則
  • 在開發之前先寫動作。
  • 根據事件來源分類actions
  • 動作越多越好。越多動作越能表達你程式的流程。
  • 捕獲事件而不是命令。可將事件和事件處理分開。
  • 提供唯一事件的內容和詳細資訊可以幫助debug。
  • action 可以帶第二個參數 : props ，可用來定義處理這個行為需要的額外資料。
  • [source] => 可以是某個元件頁面、瀏覽器API、後端API。

[hsiaofung]

Reducers

• 負責處理狀態轉換到下個狀態。
• 每一個reducer取action和現在的狀態，並且決定是否返回新的被修改的狀態，還是保持原先的狀態。

how to write reducer

• interface或type定義狀態。
• 引數包含初始狀態、或現在的狀態和現在的行為
• 函數 : 處理相對應行為的狀態改變。
• 可以寫成switch 語法 : 和react redux-thunk 一樣。
• 全域的state是一個很大的物件，對於你想要的state，註冊的reducer只要定義像對應的key就可以管理相對應的state。
• 另一種寫法是功能狀態，允許你在特定的地方註冊狀態。

[hsiaofung]

Selectors

• 用來獲得store state 的一小片。

[hsiaofung]

Effects

• side effect model
• effect 是你處理fetch data、外部交互的地方。.