ngrx/store

Store

Strore是Angular基于Rxjs的状态管理，借助于Redux的核心概念，并使用RxJs扩展的Redux实现。使用Observable来简化监听事件和订阅等操作。
在学习store之前，我们必须先来了解redux（核心、过程）。

什么时候需要Redux？

首先明确一点，Redux 是一个有用的架构，但不是非用不可。曾经有人说过这样一句话。

"如果你不知道是否需要 Redux，那就是不需要它。"

Redux 的创造者 Dan Abramov 又补充了一句。

"只有遇到 React 实在解决不了的问题，你才需要 Redux 。"

从组件角度看，如果你的应用多交互、多数据源。例如从组件角度看，如果你的应用有以下场景，可以考虑使用 Redux。

• 某个组件的状态，需要共享
• 某个状态需要在任何地方都可以拿到
• 一个组件需要改变全局状态
• 一个组件需要改变另一个组件的状态

发生上面情况时，如果不使用 Redux 或者其他状态管理工具，不按照一定规律处理状态的读写，代码很快就会变成一团乱麻。你需要一种机制，可以在同一个地方查询状态、改变状态、传播状态的变化。

总之，不要把 Redux 当作万灵丹，如果你的应用没那么复杂，就没必要用它。另一方面，Redux 只是 Web 架构的一种解决方案，也可以选择其他方案。

Redux设计思想

（1）Web 应用是一个状态机，视图与状态是一一对应的。

（2）所有的状态，保存在一个对象里面。

请务必记住这两句话，下面就是详细解释。

Redux基本概念

Redux 是 JavaScript 状态容器，提供可预测化的状态管理。
redux是专门为react开发的，但并不是只能用于react,可以用于任何界面库。
网上广为流传的Redux流向图，可以帮助我们更好地理解并使用。

1.Store
Store的角色是整个应用的数据存储中心，集中大部分页面需要的状态数据；你可以把它看成一个容器,整个应用只能有一个Store。
2.State
Store对象包含所有数据。如果想得到某个时点的数据，就要对 Store 生成快照。这种时点的数据集合，就叫做 State。

当前时刻的 State，可以通过store.getState()拿到。

Redux 规定，一个 State 对应一个 View。只要 State 相同，View 就相同。你知道 State，就知道 View 是什么样，反之亦然。

3.Action
State 的变化，会导致 View 的变化。但是，用户接触不到 State，只能接触到 View。所以，State 的变化必须是 View 导致的。Action 就是 View 发出的通知，表示 State 应该要发生变化了。

const action = {
  type: 'ADD_TODO',
  payload: 'Learn Redux'
};

Action 是一个对象,可以这样理解,Action 描述当前发生的事情。改变 State 的唯一办法，就是使用 Action。它会运送数据到 Store。
4.Action Creator
View 要发送多少种消息，就会有多少种 Action。如果都手写，会很麻烦。可以定义一个函数来生成 Action，这个函数就叫Action Creator。
5.store.dispatch()
store.dispatch()是 View 发出 Action 的唯一方法。它接受一个Action对象作为参数，将它发送出去。
6.Reducer
Store 收到 Action 以后，必须给出一个新的 State，这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。

Reducer 是一个函数，它接受 Action 和 当前 State 作为参数，返回一个新的 State。

Reducer 函数最重要的特征是，它是一个纯函数.也就是说，只要是同样的输入，必定得到同样的输出。Reducer函数里面不能改变 State，必须返回一个全新的对象.
最好把 State 对象设成只读。你没法改变它，要得到新的 State，唯一办法就是生成一个新对象。这样的好处是，任何时候，与某个 View 对应的 State 总是一个不变的对象。

store.subscribe()

Store 允许使用store.subscribe方法设置监听函数，一旦 State 发生变化，就自动执行这个函数。

ngrx/store Tutorial

下面这个Tutorial将会像你展示如何管理一个计数器的状态和如何查询以及将它显示在Angular的Component上。

1.action

src/app/counter.actions.ts

import { createAction, props } from '@ngrx/store';
export const increment = createAction(
    '[counter page] incremnet',
    props<{ operator: string; action: string }>()
);
export const decrement = createAction(
    '[counter page] decremnet',
    props<{ operator: string; action: string }>()
);
export const reset = createAction(
    '[counter page] reset',
    props<{ operator: string; action: string }>()
);

2.view层触发action

src/app/hero-detail/hero-detail.component.html

<div nz-row>
    <div nz-col nzSpan="12" class="padding">
        <div>操作人：A</div>
        <button nz-button nzType="primary" (click)="increment('A','增加1')" class="mt-5 mr-10">增加</button>
        <button nz-button nzType="danger" (click)="decrement('A','減少1')" class="mt-5 mr-10">减少</button>
        <button nz-button nzType="default" (click)="reset('A','重置')" class="mt-5 ">重置</button>
    </div>
    <div nz-col nzSpan="12" class="padding">
        <div>操作人：B</div>
        <button nz-button nzType="primary" (click)="increment('B','增加1')" class="mt-5 mr-10">增加</button>
        <button nz-button nzType="danger" (click)="decrement('B','減少1')" class="mt-5 mr-10">减少</button>
        <button nz-button nzType="default" (click)="reset('B','重置')" class="mt-5 ">重置</button>
    </div>
</div>

src/app/hero-detail/hero-detail.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { Hero } from '../hero';

import { Store } from '@ngrx/store';
import { increment, decrement, reset } from '../counter.actions';

@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls: ['./hero-detail.component.css'],
})
export class HeroDetailComponent implements OnInit {
  @Input() hero: Hero;
  constructor(private store: Store<any>) { }

  ngOnInit() {

  }
  public increment(operatorName: string, actionName: string): void {

    this.store.dispatch(increment({ operator: operatorName, action: actionName }));
  }
  public decrement(operatorName: string, actionName: string): void {

    this.store.dispatch(decrement({ operator: operatorName, action: actionName }));
  }
  public reset(operatorName: string, actionName: string): void {

    this.store.dispatch(reset({ operator: operatorName, action: actionName }));
  }
}

3.reducer

src/app/counter.reducer.ts

import * as counterAction from './counter.actions'
import { createReducer, on, Action } from '@ngrx/store'
export interface State {
    count: number;
    operator: string;
    action: string;
}
export const initialState: State = {
    count: 50,
    operator: '--',
    action: '--'
};
const counterReducer = createReducer(
    initialState,
    on(counterAction.increment, (state, { operator, action }) => ({
        ...state,
        count: state.count + 1,
        operator,
        action
    })),
    on(counterAction.decrement, (state, { operator, action }) => ({
        ...state,
        count: state.count - 1,
        operator,
        action
    })),
    on(counterAction.reset, (state, { operator, action }) => ({
        ...state,
        count: initialState.count,
        operator,
        action
    })),

)
export function reducer(state: State | undefined, action: Action) {
    console.log(counterReducer(state, action));
    return counterReducer(state, action);
}

4.全局注册Reducer

scr/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';
import { FormsModule } from '@angular/forms';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
import { StoreModule } from '@ngrx/store';
import { reducers, metaReducers } from './reducers';
import { NgZorroAntdModule, NZ_I18N, zh_CN } from 'ng-zorro-antd';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { registerLocaleData } from '@angular/common';
import zh from '@angular/common/locales/zh';
import * as fromReducer from './counter.reucer'

@NgModule({
  declarations: [AppComponent, HeroesComponent, HeroDetailComponent],
  imports: [BrowserModule, FormsModule, StoreModule.forRoot({ demo: fromReducer.reducer }, {
      metaReducers,
      runtimeChecks: {
        strictStateImmutability: true,
        strictActionImmutability: true
      }
    }), NgZorroAntdModule, HttpClientModule, BrowserAnimationsModule],
  providers: [{ provide: NZ_I18N, useValue: zh_CN }],
  bootstrap: [AppComponent]
})
export class AppModule { }

5.view层订阅

src/app/heros/heros.component.html

<div class="content">
    <h2>管理计数器</h2>

    <div class="showCounter">
        <div class="counter">{{count}}</div>
        <div><span class="">最近操作人:</span><span class="right">{{operator}}</span></div>
        <div><span class="">action:</span><span class="right">{{action}}</span></div>
    </div>
    <div class="changeCounter mt-20">
        <app-hero-detail [hero]="selectedHero"></app-hero-detail>
    </div>
</div>

src/app/heros/heros.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { State } from '../counter.reucer';
import { Store, select } from '@ngrx/store';
@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css'],
})
export class HeroesComponent implements OnInit, OnDestroy {
  private storeSubscription: Subscription;
  public count: number;
  public operator: string;
  public action: string;
  constructor(private store: Store<any>) {
  }
  ngOnInit() {
    this.storeSubscription = this.store.pipe(
      select('demo')
    ).subscribe((state: State) => {
      console.log(state);
      if (state) {
        this.count = state.count;
        this.operator = state.operator;
        this.action = state.action;
      }
    });
  }
  ngOnDestroy(): void {
    this.storeSubscription.unsubscribe();
  }
}