在angular2使用ngrx

在項目數據全局狀態管理上，在react框架使用的是Redux;
Redux是爲了解決應用程序狀態（State）管理而提出的一種解決方案。從單項數據流方面說，redux中將整個狀態都集中在一個JavaScript對象樹中。而後經過數據變動也就是通知，而將組件變動動做儲存在store 倉庫中。等到使用
時候 使用this.store.dispacth分發

經過下面在項目使用ngrx：

首先建立 store文件夾中，再建立actions reducers selectors 三個文件

1, 在reducer  初始化state 狀態，和值
        export enum ModalType {
Register = "register",
LoginByPhone = "loginByPhone",
Share = 'share',
Like = 'like',
Default = 'default'

}

//初始化State類型
export interface MemberState {
modalVisible: boolean;
modalType: ModalType
}

//初始化State的值
export const initialState: MemberState = {
modalVisible: false,
modalType: ModalType.Default
}
//註冊到Reducer

const reducer = createReducer(
initialState,
on(SetModalVisible, (state, { modalVisible }) => ({ ...state, modalVisible })),
on(SetModalType, (state, { modalType }) => ({ ...state, modalType })),
)

export function memberReducer(state: MemberState, action: Action) {
return reducer(state, action);
}

第二步：在action 建立須要變動動做文件ts
export const SetModalVisible = createAction('[member] Set modal visible', props<{ modalVisible: boolean }>());
export const SetModalType = createAction('[member] Set moddal visible', props<{ modalType: ModalType }>());

第三步：在selected文件建立分發文件

const selectMemberStates = (state: MemberState) => state;
export const getModalVisible = createReducer(selectMemberStates, (state: MemberState) => state.modalVisible);
export const getModalType = createReducer(selectMemberStates, (state: MemberState) => state.modalType)

第四步 在store文件下建立appStoreModule

@NgModule({
declarations: [],
imports: [
StoreModule.forRoot({ player: playerReducer, member: memberReducer }, {
runtimeChecks: {
strictStateImmutability: true,
strictActionImmutability: true,
strictStateSerializability: true,
strictActionSerializability: true,
}
}),
StoreDevtoolsModule.instrument({
maxAge: 20,
logOnly: environment.production
})
]
})
export class AppStoreModule { }

第五步 ：在使用的模塊中註冊進來，或者是公共核心模塊中引用；
第六步：在service.ts文件構造器初始化
constructor(private store$: Store<AppStoreModule>) {

}