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());
  }