ngrx使用总结

2019-04-23

基础知识及示例，参考：

https://blog.csdn.net/j_bleach/article/details/78161765

https://blog.csdn.net/j_bleach/article/details/78070539

https://blog.csdn.net/fen747042796/article/details/74840844

http://www.voidcn.com/article/p-garylnzx-xv.html

https://github.com/jiwenjiang/angular4-material2

https://blog.csdn.net/chenqiuge1984/article/details/80130244

官方示例：

https://github.com/ngrx/platform/tree/master/docs/store

官方在线demo：

https://stackblitz.com/github/ngrx/platform/

以下开始讲怎么做：

在项目里（的工具组件目录/公共目录）创建如下目录结构，

Models文件夹存放数据模型
Action 存放行为类型
Reducer 写具体的控制方法，
创建index.ts作为各个reducer的汇总，便于之后管理拓展。

Model 示例：

export interface Book {
  id: string;
  volumeInfo: {
    title: string;
    subtitle: string;
    authors: string[];
    publisher: string;
    publishDate: string;
    description: string;
    averageRating: number;
    ratingsCount: number;
    imageLinks: {
      thumbnail: string;
      smallThumbnail: string;
    };
  };
}

export function generateMockBook(): Book {
  return {
    id: '1',
    volumeInfo: {
      title: 'title',
      subtitle: 'subtitle',
      authors: ['author'],
      publisher: 'publisher',
      publishDate: '',
      description: 'description',
      averageRating: 3,
      ratingsCount: 5,
      imageLinks: {
        thumbnail: 'string',
        smallThumbnail: 'string',
      },
    },
  };
}

Action 示例：

import { Incident } from './../models/incidentModel';
import { Action } from "@ngrx/store";

export const SAVE_INCIDENT = "SAVE_INCIDENT";
export const RESET = "RESET";

export class SaveIncident implements Action {
    readonly type = SAVE_INCIDENT;
    constructor(public payload: Incident) {}
}
export class Reset implements Action {
    readonly type = RESET;
}

export type Actions = SaveIncident | Reset;

reducer 示例：

import * as inc from '../../action/incidentAction';
import { Incident, generateMockIncident } from './../../models/incidentModel';

export function incidentReducer(incident: Incident = generateMockIncident(), action: inc.Actions) {
    switch (action.type) {
        case inc.SAVE_INCIDENT:
            //   return action.payload;
            return Object.assign({}, incident, action.payload);

        case inc.RESET:
            return generateMockIncident();

        default:
            return incident;
    }
}

Reducer –> index.ts: 多个模块集成到一起


import * as incident from './incident/incidentReducer';
import { Incident } from '../models/incidentModel';

import * as incidentDetail from './incidentDetail/incidentReducer';
import { IncidentDetail } from '../models/incidentDetailModel';

import * as initialKeyWord from './consultKeywordReducer';

export interface State {
    incident: Incident;
    incidentDetail: IncidentDetail;
    initialKeyWord: string;
}

export const reducer = {
    incident: incident.incidentReducer,
    incidentDetail: incidentDetail.incidentDetailReducer,
    initialKeyWord: initialKeyWord.initialKeyWordReducer,
};

随后在app.modules.ts (声明组件的文件里)注入reducer:

import {StoreModule} from '@ngrx/store';
// ngrx reducer
import { incidentReducer } from './commonTools/ngrx/reducer/incident/incidentReducer';
import { incidentDetailReducer } from './commonTools/ngrx/reducer/incidentDetail/incidentReducer';
import { initialKeyWordReducer } from './commonTools/ngrx/reducer/consultKeywordReducer';
@NgModule({
imports: [
        StoreModule.provideStore({
            incident: incidentReducer,
            incidentDetail: incidentDetailReducer,
            initialKeyWord: initialKeyWordReducer,
            // reducers: reducer,
        }),
],
})

随后在具体的组件中进行存取操作：例如警情组件：

存数据步骤：

导入相关模块：

1	import * as reducer from '../../../commonTools/ngrx/reducer/index';
2	import { Store } from '@ngrx/store';
3	import * as incAction from '../../../commonTools/ngrx/action/incidentAction';

constructor

1	constructor(
2	private store: Store<reducer.State>,
3	) {
4	}

// ngrx store 存数据, data为具体要存进去的数据
                        this.store.dispatch({
                            type: incAction.SAVE_INCIDENT,
                            payload: data
                        });

取数据步骤：

导入模块：

import { Observable } from 'rxjs/Observable';
import { Subscription } from 'rxjs/Subscription';
import { Store } from '@ngrx/store';
import { Incident, generateMockIncident } from '../../../commonTools/ngrx/models/incidentModel';
import * as  inc from '../../../commonTools/ngrx/reducer/index';

定义变量接收：

1	currentInc$: Observable<Incident>;
2	private tagStateSubscription: Subscription;

constructor(
    private store: Store<inc.State>,
) {
    this.currentInc$ = store.select('incident');
}

ngOnInit() {
    this.tagStateSubscription = this.currentInc$.subscribe((incident) => {
        this.info = incident;
      });
}

组件销毁时取消订阅

1	ngOnDestroy() {
2	this.tagStateSubscription.unsubscribe();
3	}

使用上大致就是这样，关于原理和概念都在开头的几个链接。

都是在摸索中前行。共勉。