ngrx 4: 创建 ngrx 4.x 项目

创建 @ngrx 4.x 项目

@ngrx 4.x 相比上一个版本有了一些变化，该文介绍了如何在 Angular 中集成 @ngrx r.x 实现状态管理。

一、创建基本项目

使用 Angular CLI 创建项目

执行 ng new hello 创建 Angular 项目

添加 @ngrx 包

至少添加两个包：

• @ngrx/store
• @ngrx/store-devtools

第一个是 @ngrx 的核心包，第二个是与浏览器工具插件配合的包，你可以从这里下载 chrome 的 devtools.

目前它们的版本分别是：

"@ngrx/store": "4.1.0",
"@ngrx/store-devtools": "4.0.0",

执行命令：

npm i @ngrx/store @ngrx/store-devtools -S

之后，你应该在 package.json 中看到这两个包的定义。

二、基本示例

1. 创建计数器的 reducer。

它接受三种 action，我们使用字符串常量来分别表示

• INCREMENT    增加
• DECREMENT   减少
• RESET             重置

这里的状态就是一个基本类型的 number，默认值为 0。

import { Action } from '@ngrx/store';

export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';
export const RESET = 'RESET';

export function counterReducer(state: number = 0, action: Action) {
    switch (action.type) {
        case INCREMENT:
            return state + 1;

        case DECREMENT:
            return state - 1;

        case RESET:
            return 0;

        default:
            return state;
    }
}

2. 注册 reducer

在这个示例中，我们仅仅拥有一个计数器的 reducer，所以只需要注册它自己。

在 ngrx 4.x 中，应用需要在根模块中使用 StoreModule.forRoot 来注册根 reducer。该方法可以接收两个参数

• 表示 reducer 的 ActionReducerMap对象，使用它，我们可以将多个 reducer 聚合起来。
• 一个可选的配置对象，其中可选的名为 initialState 表示初始状态的对象，此对象的结构需要与第一个参数对应。

在这个示例中，第一个参数被表示成了一个 ActionReducerMap 对象。

{ counter: counterReducer }

这里没有提供初始状态。如果提供的话，结构必须与前面的 ActionReducerMap 结构相同。比如：

StoreModule.forRoot({ counter: counterReducer }, { initialState: { counter: 9 } }),

下面是官方的示例源码

import { NgModule } from '@angular/core'
import { StoreModule } from '@ngrx/store';
import { counterReducer } from './counter';

@NgModule({
  imports: [
    BrowserModule,
    StoreModule.forRoot({ counter: counterReducer }),
    StoreDevtoolsModule.instument({maxAge: 50 })
  ]
})
export class AppModule {}

高亮行为启用 Redux Dev tools 支持，以便在浏览器工具中查看状态。

3. 使用 Store

使用 Store 的 select 方法可以从 Store 中选取状态数据。在这个示例中，Store 的结构为一个对象，其中 counter 表示我们的计数状态，见前面 2 的定义。

我们可以将它读取出来，读取的结果是一个 Observable 对象

this.counter = store.select('counter');

因此，在模板中需要使用 async 将它的值订阅出来。

改变 Store 的状态使用 Action，通过调用 Store 的 dispatch 方法来改变 Store 的状态。

import { Store } from '@ngrx/store';
import { Observable } from 'rxjs/Observable';
import { INCREMENT, DECREMENT, RESET } from './counter';
import { Component } from '@angular/core';

interface AppState {
    counter: number;
}

@Component({
    selector: 'app-root',
    template: `
        <button (click)="increment()">Increment</button>
        <div>Current Count: {{ counter | async }}</div>
        <button (click)="decrement()">Decrement</button>

        <button (click)="reset()">Reset Counter</button>
    `
})
export class MyAppComponent {
    counter: Observable<number>;

    constructor(private store: Store<AppState>) {
        this.counter = store.select('counter');
    }

    increment() {
        this.store.dispatch({ type: INCREMENT });
    }

    decrement() {
        this.store.dispatch({ type: DECREMENT });
    }

    reset() {
        this.store.dispatch({ type: RESET });
    }
}

4. 运行应用

运行应用，点击增加、减少按钮，观察状态的变化。

启动浏览器插件 Dev Tools。观察状态的变化。

三、创建使用功能模块划分状态

在 Angular 中，可以使用模块来划分应用。

在功能模块中，我们使用 StoreModule.forFeature 来注册 reducer, 在这个方法中，我们需要提供一个字符串作为这个功能模块的 Key, 这部分状态将在功能模块被加载的时候附加到全局状态上。

import { NgModule } from '@angular/core'
import { StoreModule } from '@ngrx/store';
import { counterReducer } from './counter';

@NgModule({
  imports: [
    StoreModule.forFeature('feature', { counter: counterReducer })
  ]
})
export class CounterModule {}

参见：Feature Module State Composition

四、使用 combineReducers 自由组合 reducer

可以使用 redux 中经典的 combineReducers 函数自由组合 recuders，以便构建自定义的状态结构。

但是，由于 AOT 的原因，会导致无法通过 AOT 检测。

使用注入根 reducer 的方法是来完成。

这种方式需要定义一个 Token，然后通过 provider 来完成根 reducer 的注册。而不是 StoreModule.forRoot() 函数。

1. 定义 Token

使用标准方式定义 Token,你需要提供一个 Token 的名称。

export const REDUCER_TOKEN = new InjectionToken<ActionReducerMap<fromRoot.State>>('Registered Reducers');

2. 定义工厂函数

定义一个返回根 reducer 的工厂函数，这个函数甚至可以依赖某个服务，这样的化，还需要在 prodiver 中提供这个服务的依赖。

export function getReducers(someService: SomeService) {
  return someService.getReducers();
}

3. 通过 provider 完成注册

这里的 deps 是因为上面的示例中，使用了这个 SomeService 服务。

providers: [
    {
      provide: REDUCER_TOKEN,
      deps: [SomeService],
      useFactory: getReducers
    }
  ]

完整的代码

import { NgModule, InjectionToken } from '@angular/core';
import { StoreModule, ActionReducerMap } from '@ngrx/store';

import { SomeService } from './some.service';
import * as fromRoot from './reducers';

export const REDUCER_TOKEN = new InjectionToken<ActionReducerMap<fromRoot.State>>('Registered Reducers');

export function getReducers(someService: SomeService) {
  return someService.getReducers();
}

@NgModule({
  imports: [
    StoreModule.forRoot(REDUCER_TOKEN),
  ],
  providers: [
    {
      provide: REDUCER_TOKEN,
      deps: [SomeService],
      useFactory: getReducers
    }
  ]
})
export class AppModule { }

参见：Injecting Reducers

五、其它资料：

• Store API
• Store Readme

• Nested reducers aren't working anymore with V4