ngxs入門

ngxs文檔 https://ngxs.gitbook.io/ngxs

ngxs是什麼

ngxs是一款angular的狀態管理框架。他能幫助我們全局性的管理應用程序的所有狀態，狀態的概念無所不包，我們的數據，登錄認證，等等，都可以稱爲狀態。

什麼時候可能想要使用

• 當應用程序的各個組件需要共享某些數據時
• 當你需要組件變得更加獨立，更易於測試時
• 當程序的狀態改變來自各個頁面的組件時
• 當多人共同協作一個大型項目時

當遇到以上情況時，我們可能會希望出現一個框架，能讓我們清晰的管理程序狀態（數據），使得狀態的改變不會因多組件而混亂。同時，我們也希望能夠監控到：狀態何時改變，由哪個組件，因爲什麼而改變，之前的狀態是怎樣，等等信息。這些都可以利用ngxs和配套插件進行解決。

在ngxs出來之前，angular有ngrx（來自redux的靈感），這很棒，但實際使用起來會非常費力，你會花大量的時間去爲每一個action寫reducer，effect。當然，付出這些代價的同時，我們的應用程序邏輯變得十分清晰，組件與組件的耦合變得更加鬆散，最內層的組件甚至只需要使用input和output負責展示數據，因此changedetection也可以使用onpush策略，整個組件也變得更加易於測試和維護。

ngxs更加活用了angular的特性，使用裝飾器，並且隱藏了reducer的概念，鼓勵程序員使用rxjs進行一系列的流式處理，這在一定程度上大大縮減了我們的代碼量，使得一些中小項目使用狀態管理框架的成本變得很低。

ngxs架構

ngxs有四個概念：

• Store: Global state container, action dispatcher and selector
• Actions: Class describing the action to take and its associated metadata
• State: Class definition of the state
• Selects: State slice selectors

store是ngxs核心，action，selects最終將融入state類，並被註冊到store裏
請看下圖：

某個特定的action發生了，於是組件將其dispatch到store，store裏面由於我們已經預先寫好了該action的處理機制（改變狀態，並進行一些其他操作），於是store會根據該特定action自行進行狀態的改變。組件需要知道改變後的狀態，因此組件使用select訂閱他所關注的狀態。

小DEMO

官方已經給出了一個精簡到無法再精簡的例子https://stackblitz.com/edit/n...
該demo示例是一個按鍵點擊計數器，唯一的狀態只有計數值，由ngxs進行管理，可以這個demo幫助我們形成action，state，store，selects的相互關係。

使用ngxs只需要：

1. 編寫action類

   export class Add {
     static readonly type = 'Add';
   }

2. 編寫state類

   @State<number>({
     name: 'count',
     defaults: 0
   })
   export class CountState {
     @Action(Add)
     add({ getState, setState }) {
       const state = getState();
       setState(state + 1);
     }
   }

3. 把state類註冊到ngxs的module中

   imports: [
       BrowserModule,
       NgxsModule.forRoot([CountState])
     ],

5.在component中訂閱計數器狀態

  @Select(CountState) count$: Observable<number>;

6.在component中使用dispatch

constructor(private store: Store) {}

  onClick() {
    this.store.dispatch(new Add());
  }