angular使用ngrx做状态管理——以获取AppId作为全局变量为例写的小demo

一、在actions文件夹下创建action文件appId.action.ts

该文件用于更新openId

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

export const types = {
    UPDATE_APPID:"UPDATE_APPID"
}

export class UpdateAppIdAction implements Action {
    readonly type = types.UPDATE_APPID;
    constructor(public payload:string){}
}
export type Actions = UpdateAppIdAction

二、在store文件夹下创建reducer文件appId.reducer.ts

import * as UpdateAppIdAction from '../actions/appId.action';

// 定义 reducer的State
export interface AppidState {};
// State的初始默认值
const initialState: AppidState = {
    appid:""
};
// 定义action 如何改变state的状态
export function appidReducer(state:AppidState = initialState,action:UpdateAppIdAction.Actions){
    switch(action.type){
        case UpdateAppIdAction.types.UPDATE_APPID:
            return Object.assign({}, state, {
                appid: action.payload
            });
        default:
            return state;
    }
}

三、app.module.ts中引入

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    ...//其他引入
    StoreModule.forRoot({ appidStateSelect: appidReducer }),
    
  ],

四、在app.component.ts中获取appId,并更新store中存储的appId

贴出export里面的代码

export class AppComponent implements OnInit {
 
  constructor(private store:Store<AppidState>) {}//注入store
  ngOnInit() {
   //获取到appId作为全局变量使用
    setTimeout(()=>{
      this.store.dispatch({//通知action，通过action更新store
        type:types.UPDATE_APPID,
        payload:new Date().getTime()
      })
    },300)//此处在实际项目中改为从后端获取
  }
}

四、在各模块使用APPID

//AppIDState$定义为AppidState数据类型的可观察对象，通过构造器中用store的select()方法赋值实现。
  AppIDState$: Observable<AppidState>;
  constructor(private store: Store<AppidState>) {//注入store
     this.AppIDState$ = store.select("appidStateSelect"); 从app.module.ts中获取appidStateSelect状态流
  }
   ngOnInit() {
      this.AppIDState$.subscribe(state=>{
        console.log(state) //查看输出信息即为全局变量APPID
      })
  }