15.2 - 快速开始

下载 NgRx

npm install @ngrx/store @ngrx/effects @ngrx/entity @ngrx/router-store @ngrx/store-devtools @ngrx/schematics

配置 NgRx CLI

ng config cli.defaultCollection @ngrx/schematics

// angular.json
"cli": {
     "defaultCollection": "@ngrx/schematics"
}

创建 Store

ng g store State --root --module app.module.ts --statePath store --stateInterface AppState

创建 Action

ng g action store/actions/counter --skipTests

import { createAction } from "@ngrx/store"
export const increment = createAction("increment")
export const decrement = createAction("decrement")

创建 Reducer

ng g reducer store/reducers/counter --skipTests --reducers=../index.ts

import { createReducer, on } from "@ngrx/store"
import { decrement, increment } from "../actions/counter.actions"
export const counterFeatureKey = "counter"
export interface State {
    count: number
}
export const initialState: State = {
    count: 0
}
export const reducer = createReducer(
    initialState,
    on(increment, state => ({ count: state.count + 1 })),
    on(decrement, state => ({ count: state.count - 1 }))
)

创建 Selector

ng g selector store/selectors/counter --skipTests

import { createFeatureSelector, createSelector } from "@ngrx/store"
import { counterFeatureKey, State } from "../reducers/counter.reducer"
import { AppState } from ".."
export const selectCounter = createFeatureSelector<AppState, State>(counterFeatureKey)
export const selectCount = createSelector(selectCounter, state => state.count)

组件类触发 Action、获取状态

import { select, Store } from "@ngrx/store"
import { Observable } from "rxjs"
import { AppState } from "./store"
import { decrement, increment } from "./store/actions/counter.actions"
import { selectCount } from "./store/selectors/counter.selectors"
export class AppComponent {
    count: Observable<number>
    constructor(private store: Store<AppState>) {
        this.count = this.store.pipe(select(selectCount))
    }
    increment() {
        this.store.dispatch(increment())
    }
    decrement() {
        this.store.dispatch(decrement())
    }
}

组件模板显示状态

<button (click)="increment()">+</button>
<span>{{ count | async }}</span>
<button (click)="decrement()">-</button>