一、在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
})
}