安裝schematics工具

yarn add @ngrx/schematics --dev yarn add ngrx-store-freeze --dev 復(fù)制代碼

安裝包

yarn add @ngrx/{store,effects,entity,store-devtools} 復(fù)制代碼

使用schematics

ng config cli.defaultCollection @ngrx/schematics 復(fù)制代碼

初始化state

ng generate @ngrx/schematics:store State --root --module app.module.ts 復(fù)制代碼

初始化effect

ng generate @ngrx/schematics:effect App --root --module app.module.ts 復(fù)制代碼

初始化action

ng generate action User --group 復(fù)制代碼

新建組件

ng generate container UsersPage --state reducers/index.ts --stateInterface MyState 復(fù)制代碼

新建effect

ng generate module User --flat false ng generate effect user/User -m user/user.module.ts --group 復(fù)制代碼

新建entity

ng generate entity User -m app.module.ts 復(fù)制代碼

新建feature

ng generate feature User --group 復(fù)制代碼

新建reducer

ng generate reducer User --group 復(fù)制代碼

實(shí)戰(zhàn)

// 新建項(xiàng)目ngrx-test ng new ngrx-test // 配置環(huán)境 yarn add @ngrx/schematics --dev yarn add ngrx-store-freeze --dev yarn add @ngrx/{store,effects,entity,store-devtools} ng config cli.defaultCollection @ngrx/schematics // 初始化store ng generate @ngrx/schematics:store State --root --module app.module.ts // 初始化effect ng generate @ngrx/schematics:effect App --root --module app.module.ts --group // 新建Iwe7StoreModule并加載到AppModule ng generate module Iwe7Store --flat false -m app.module.ts // 新建模型Iwe7Member并掛在到Iwe7StoreModule ng generate entity Iwe7Member -m iwe7-store/iwe7-store.module.ts --group // 新建組件并掛在到Iwe7StoreModule并導(dǎo)出組件，指定reducer和interface ng generate container iwe7-store/iwe7-member -m iwe7-store.module.ts --state ../reducers/index.ts --stateInterface State --export // 啟動(dòng)應(yīng)用 yarn start 復(fù)制代碼

到此項(xiàng)目雛形已現(xiàn)！angular的schema技術(shù)真是牛的一逼，相信很快其他框架也會(huì)競(jìng)相模仿！~~

簡(jiǎn)單擼串

import { Component, OnInit } from '@angular/core'; import { Store } from '@ngrx/store'; import * as fromStore from '../../reducers'; import * as iwe7MemberActions from './../../actions/iwe7-member.actions'; import { Iwe7Member } from '../../models/iwe7-member.model'; import { pluck } from 'rxjs/operators'; let memberId: number = 0; @Component({selector: 'app-iwe7-member',templateUrl: './iwe7-member.component.html',styleUrls: ['./iwe7-member.component.css'] }) export class Iwe7MemberComponent implements OnInit {list: any = this.store.pipe(pluck('iwe7Member'), pluck('entities'));ids: any = this.store.pipe(pluck('iwe7Member'), pluck('ids'));constructor(private store: Store<fromStore.State>) { }ngOnInit() { }add() {memberId = memberId + 1;const newMember: Iwe7Member = { id: memberId + '' };this.store.dispatch(new iwe7MemberActions.AddIwe7Member({iwe7Member: newMember}));} } 復(fù)制代碼<p>iwe7-member entity works! </p><ul><li *ngFor="let id of ids|async">{{(list|async)[id] | json}}</li> </ul><button (click)="add()">添加</button> 復(fù)制代碼

點(diǎn)擊按鈕添加即可實(shí)現(xiàn)數(shù)據(jù)的添加！

正規(guī)化

import {ActionReducer,ActionReducerMap,createFeatureSelector,createSelector,MetaReducer } from '@ngrx/store'; import { environment } from '../../environments/environment'; import * as iwe7MemberReducer from './iwe7-member.reducer'; import { storeFreeze } from 'ngrx-store-freeze'; export interface State {member: iwe7MemberReducer.State; }export const reducers: ActionReducerMap<State> = {member: iwe7MemberReducer.reducer, };export function logger(reducer: ActionReducer<State>): ActionReducer<State> {return function (state: State, action: any): State {console.log('state', state);console.log('action', action);return reducer(state, action);}; }export const metaReducers: MetaReducer<State>[] = !environment.production ? [] : [logger];export const selectIwe7MemberState = createFeatureSelector<iwe7MemberReducer.State>('member'); export const selectIwe7MemberIds = createSelector(selectIwe7MemberState,iwe7MemberReducer.selectIds );export const selectIwe7MemberEntities = createSelector(selectIwe7MemberState,iwe7MemberReducer.selectEntities );export const selectAllIwe7Member = createSelector(selectIwe7MemberState,iwe7MemberReducer.selectAll );export const selectIwe7MemberTotal = createSelector(selectIwe7MemberState,iwe7MemberReducer.selectTotal ); 復(fù)制代碼<p>共計(jì)：{{total|async}} </p><ul><li *ngFor="let item of list|async">{{ item.realname }}<button (click)="removeUser(item)">刪除</button><button (click)="updateUser(item)">更新</button></li> </ul><button (click)="addUser()">添加會(huì)員</button> 復(fù)制代碼import { selectAllIwe7Member, selectIwe7MemberTotal, selectIwe7MemberIds, selectIwe7MemberEntities } from './../../reducers/index'; import { Component, OnInit } from '@angular/core'; import { Store } from '@ngrx/store'; import * as fromStore from '../../reducers'; import * as iwe7MemberActions from './../../actions/iwe7-member.actions'; import { Iwe7Member } from '../../models/iwe7-member.model'; import { Observable } from 'rxjs'; let memberId: number = 0; @Component({selector: 'app-iwe7-member',templateUrl: './iwe7-member.component.html',styleUrls: ['./iwe7-member.component.css'] }) export class Iwe7MemberComponent implements OnInit {list: Observable<Iwe7Member[]>;total: Observable<number>;ids: Observable<string[] | number[]>;entities: Observable<{ [key: string]: Iwe7Member }>;constructor(private store: Store<fromStore.State>) {this.list = this.store.select(selectAllIwe7Member);this.total = this.store.select(selectIwe7MemberTotal);this.ids = this.store.select(selectIwe7MemberIds);this.entities = this.store.select(selectIwe7MemberEntities);}ngOnInit() { }addUser() {memberId = memberId + 1;const newMember: Iwe7Member = { id: memberId + '', realname: 'realname-' + memberId };this.store.dispatch(new iwe7MemberActions.AddIwe7Member({iwe7Member: newMember}));}removeUser(user: Iwe7Member) {this.store.dispatch(new iwe7MemberActions.DeleteIwe7Member(user));}updateUser(user: Iwe7Member) {const realname = 'update ' + user.id + ' realname';const iwe7Member = {id: user.id,changes: {realname}};this.store.dispatch(new iwe7MemberActions.UpdateIwe7Member({iwe7Member}));} } 復(fù)制代碼

開(kāi)發(fā)速度及體驗(yàn)都是杠杠滴！！

增加

ng g m iwe7-store/iwe7-fans --spec=false -m iwe7-store/iwe7-store.module --export=true ng g c iwe7-store/iwe7-fans --spec=false --export=true -m iwe7-store/iwe7-fans/iwe7-fans.module.ts ng generate entity Iwe7Fans -m iwe7-store/iwe7-fans/iwe7-fans.module.ts --group --spec=false ng g s services/iwe7-fans --spec=false ng generate effect Iwe7Fans -m iwe7-store/iwe7-fans/iwe7-fans.module.ts --group --spec=false 復(fù)制代碼

總結(jié)

以上是生活随笔為你收集整理的@ngrx入坑angular的schema，爽的一逼！的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。