ngrx/store 設定篇及會員篇之 Action, Reducer

npm install @ngrx/core @ngrx/store @ngrx/effects @ngrx/router-store @ngrx/store-devtools reselect –save
第二步：建立目錄
在 src/app 底下

mkdir store
cd store
touch index.ts
mkdir actions
mkdir effects
mkdir reducers
mkdir selectors
並各自建立一個 index.ts，完成後如下

.
├── actions
│   └── index.ts
├── effects
│   └── index.ts
├── index.ts
├── reducers
│   └── index.ts
└── selectors
└── index.ts
第三步：修改 src/app/store/index.ts
如下

export * from ‘./actions’;
export * from ‘./reducers’;
export * from ‘.lectors’;
export * from ‘./effects’;
先填一些東西讓 Compiler 不要抱怨
store/actions/index.ts

export const actions = ‘Actions’;
store/reducers/index.ts

export const reducers = ‘Reducers’;
store/effects/index.ts

export const effects = ‘Effects’;
storelectors/index.ts

export const selectors = ‘Selectors’;
第四步：修改 src/app/app.module.ts

//… 省略
// for ngrx/store
import { StoreModule } from ‘@ngrx/store’;
import { EffectsModule } from ‘@ngrx/effects’;
import { StoreDevtoolsModule } from ‘@ngrx/store-devtools’;
import { StoreRouterConnectingModule, RouterStateSerializer } from ‘@ngrx/router-store’;
import { environment } from ‘../environments/environment’;
import * as fromStore from ‘./store’;
//… 省略

@NgModule({
//…
imports: [
//…
HttpClientModule,
StoreModule.forRoot(fromStore.reducers),
EffectsModule.forRoot(fromStore.effects),
!environment.production ? StoreRouterConnectingModule : [],
!environment.production ? StoreDevtoolsModule.instrument({ maxAge: 50 }) : [],
//…
],
//…
我們用 index.ts 將所有 store 的東西包起來，在 StoreModule.forRoot() 跟 EffectsModule.forRoot() 傳進 fromStore.reducers 跟 fromStore.effects
加入 environment 環境變數，用來判別現在是 production mode 還是 development mode，我們只有在 development mode 才會打開 StoreDevtoolsModule 跟 StoreRouterConnectingModule
StoreDevtoolsModule 讓我們可以使用 Chrome Extensions Redux Devtools 來看 ngrx/store 的 Action 跟 State
第五步：安裝 Chrome Extensions Redux Devtools
到 Google Chrome 擴充功能，尋找 Redux

ng generate class user.actions –spec
第二步：修改 store/actions/user.actions.ts

import { Action } from ‘@ngrx/store’;
import { User } from ‘../../models’;

// define action types
export const LOGIN = ‘[user] LOGIN’;
export const LOGIN_SUCCESS = ‘[user]  LOGIN_SUCCESS’;
export const LOGIN_FAIL = ‘[user] LOGIN_FAIL’;

export const LOGOUT = ‘[user] LOGOUT’;
export const LOGOUT_SUCCESS = ‘[user] LOGOUT_SUCCESS’;
export const LOGOUT_FAIL = ‘[user] LOGOUT_FAIL’;

export const GETUSER = ‘[user] GETUSER’;
export const GETUSER_SUCCESS = ‘[user] GETUSER_SUCCESS’;
export const GETUSER_FAIL = ‘[user] GETUSER_FAIL’;

// define Actions class
export class LoginAction implements Action {
readonly type = LOGIN;
constructor(public payload: User) { }
}
export class LoginSuccessAction implements Action {
readonly type = LOGIN_SUCCESS;
constructor(public payload: string) { }
}
export class LoginFailAction implements Action {
readonly type = LOGIN_FAIL;
constructor(public payload: any) { }
}
export class LogoutAction implements Action {
readonly type = LOGOUT;
}
export class LogoutSuccessAction implements Action {
readonly type = LOGOUT_SUCCESS;
}
export class LogoutFailAction implements Action {
readonly type = LOGOUT_FAIL;
}
export class GetUserAction implements Action {
readonly type = GETUSER;
}
export class GetUserSuccessAction implements Action {
readonly type = GETUSER_SUCCESS;
constructor(public payload: string) { }         // username
}
export class GetUserFailAction implements Action {
readonly type = GETUSER_FAIL;
constructor(public payload: any) { }
}
export type UserActions
= LoginAction
| LoginSuccessAction
| LoginFailAction
| LogoutAction