angular使用ngrx做状态管理

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

export const types = {

UPDATE_APPNAME: "UPDATE_APPNAME"

}

export class UpdateAppNameAction implements Action {

readonly type = types.UPDATE_APPNAME;

constructor(public payload:string){}

}

export type Actions = UpdateAppNameAction

import * as UpdateAppNameAction from "../actions/appName.action";

// 定义 reducer的State

export interface AppNameState {};

// State的初始默认值

const initialState: AppNameState = {

appname: "test"

};

// 定义action 如何改变state的状态

export function appNameReducer(state:AppNameState = initialState,action:UpdateAppNameAction.Actions){

switch(action.type){

case UpdateAppNameAction.types.UPDATE_APPNAME:

return Object.assign({}, state, {

appname: action.payload

});

default:

return state;

}

}

@NgModule({

declarations: [AppComponent],

imports: [

BrowserModule,

StoreModule.forRoot({ appNameStateSelect: appNameReducer })

]

})

// 获取到appName作为全局变量使用

setTimeout(()=>{

this.store.dispatch({// 通知action，通过action更新store

type: types.UPDATE_APPNAME,

payload: new Date()

})

},1000)// 此处在实际项目中改为从后端获取

AppNameState$: Observable<AppNameState>;

constructor(private store: Store<AppNameState>) {

this.AppNameState$ = store.select("appNameStateSelect");//// 从app.module.ts中获取appidStateSelect状态流

}

ngOnInit() {

this.AppNameState$.subscribe((state: any) =>{

console.log(state) // 查看输出信息即为全局变量APPName

console.log(state.appname);

})

}