angular ngrx 简单解释

通过一个完整的例子来解释ngrx的引入和使用.

1. 需要创建一个user.actions.ts, 用于方法声明.

import { createAction, props } from '@ngrx/store';
import { User } from './user.reducer'

export const addUser = createAction(
    '[User] Add User',
    props<{ user: User }>()
);

2. 创建user.reducer.ts , 用于托管对象类型声明,默认值设置, 最主要的功能是同步修改托管对象值.

import {Action, createReducer, on} from '@ngrx/store';
import * as UserActions from './user.actions';

export interface User {    //  创建默认类型
    max: number,
    timeOut: number
}

export const initialState: User = {              // 给出默认值
    max: 1,
    timeOut: 1
};

const userReducer = createReducer(
    initialState,                                        // 第一个参数默认值
    on(UserActions.addUser, (state, action) => action.user)  // 绑定方法,  第一个参数以前的值, 第二个参数新的值 ,   相当于返回最新的只值
)

export function reducer(state: User, action: Action) {      //导出reducer  
    return userReducer(state, action);
}

3. 创建获取状态方法 user.selectors.ts, 创建获取托管对象方法

import { createFeatureSelector } from '@ngrx/store';
import { User } from './user.reducer';                   

export const userState = createFeatureSelector<User>('user');        

4. 创建 user.effects.ts, 用于异步请求

import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { EMPTY } from 'rxjs';
import { map, mergeMap, catchError } from 'rxjs/operators';
import { HomeService } from '../../routes/home/home/home.service';
import { addUser } from './user.actions' 

@Injectable()
export class UserEffects {

loadUser$ = createEffect(() => this.actions$.pipe(
    ofType('[User] Load User'),
    mergeMap(() => this.homeService.getUser()     //  api请求
    .pipe(
        map(user => {
            console.log(user);
            return addUser({user: {max: 100, timeOut: 100}})}
        ),
        catchError(() => EMPTY)
    ))
    )
);

constructor(
    private actions$: Actions,
    private homeService: HomeService
) {}
}

4.1 创建home.service.ts 用于请求

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { RequestService } from './request.service'

@Injectable({
providedIn: 'root'
})
export class HomeService {

constructor(private rs: RequestService) { }

public getUser(): Observable<any> {
    return this.rs.get('/xxxx');
}
}    

5. 创建index.ts, 方便引用

export * from './user.actions';
export * from './user.reducer';
export * from './user.selectors';
export * from './user.effects';  

6. 创建store.index.ts

import {
ActionReducerMap,
MetaReducer,
ActionReducer, StoreModule
} from '@ngrx/store';
import { RouterReducerState } from '@ngrx/router-store';
import { environment } from '../../environments/environment';
import { localStorageSync } from 'ngrx-store-localstorage';   //持久化数据
import * as user from './user';

export interface AppState {
user: user.User

}

export const reducers: ActionReducerMap<AppState> = {
user: user.reducer
};


// this will save part of redux store into localstorage                 数据持久化
// and restore this part on app init
export function localStorageSyncReducer(reducer: ActionReducer<any>): ActionReducer<any> {
return localStorageSync({
    keys: ['user'],
    rehydrate: true,
})(reducer);
}

export const metaReducers: MetaReducer<AppState>[] = [
localStorageSyncReducer
].concat(
environment.production ?
    [] : // production only meta reducers
    [] // dev only meta reducers
);

export const effects = [
user.UserEffects
];  

7. core.module.ts， 在核心module 中引入store 方法

import { reducers, metaReducers, effects } from '../store';
import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
imports: [ // ngrx modules
    StoreModule.forRoot(reducers, {
    metaReducers,
    runtimeChecks: {
        strictStateImmutability: false,
        strictActionImmutability: false,
        strictStateSerializability: false,
        strictActionSerializability: false,
    },
    }),
EffectsModule.forRoot([...effects]),
]
export class CoreModule {
// thi module can be load only once
constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
    throwIfAlreadyLoaded(parentModule, 'CoreModule');
}
}

8.在app.module.ts中引入核心module

imports: [CoreModule]

9.这就完成了 ngrx 状态管理构建, 可以在html 和ts 中调用了

1. html 中通过books$ | async 获取
2. ts中引用

import {Store, select} from '@ngrx/store';
import { addUser } from '../../../store/user/user.actions';
import { userState } from '../../../store/user/user.selectors';
public vm$ = this.store.pipe(select(userState));
// ts 中通过this.store.dispatch(addUser({user: {max: 100, timeOut: 100}})); 触发
this.vm$.subscribe(item=>console.log(item));// 监测变化, 最后记得取消订阅