ngrx/store 之會員篇 Effects, Selector

 ngrx/store 之會員篇 Effects, Selector
今天開始 今天完成

今天目標：完成會員部分的 ngrx/store
複習一下我們的目標

 複習一下 [ngrx/store-7] 純函數 (Pure Function), Effects 在 store 中的角色就是要處理有“副作用”的部分，例如跟後端聯繫，讀出寫入 Localstorage 等等，不是純函數的部分，在會員篇的狀態中， Login, Logout, GetUser 都會有“副作用”，所以也都會用到 Effects，

會員篇 – Effects
第一步：建立 src/app/store/effects/user.effects.ts

ng generate class user.effects –spec
第二步：修改　user.effects.ts

import { Injectable } from ‘@angular/core’;
import { Action } from ‘@ngrx/store’;
import { Effect, Actions } from ‘@ngrx/effects’;

import { Observable } from ‘rxjs/Observable’;
import { of } from ‘rxjs/observable/of’;
import { map, switchMap, filter, catchError } from ‘rxjs/operators’;

import { UserService } from ‘../../userrvice/user.service’;
import { UtilsService } from ‘../..rvices/utils.service’;
import { User, Response } from ‘../../models’;
import * as actions from ‘../actions’;

@Injectable()
export class UserEffects {
constructor(
private action$: Actions,
private userService: UserService,
private utils: UtilsService
) { }

@Effect()
loginEffect$: Observable<Action> = this.action$.ofType(actions.LOGIN).pipe(
map((action: actions.LoginAction) => action.payload),
switchMap((user: User) => {
return this.userService.loginServer(user).pipe(
map((res: Response) => {
if (res.success) {
if (user.rememberMe) {
this.utils.writeToken(res.payload);
}
return new actions.LoginSuccessAction(user.username);
} else {
return new actions.LoginFailAction(res.payload);
}
}),
catchError((err) => of(new actions.LoginFailAction(err))),
)
}),
);

@Effect()
logoutEffect$: Observable<Action> = this.action$.ofType(actions.LOGOUT).pipe(
map(() => {
this.utils.removeToken();
return (new actions.LogoutSuccessAction());
})
)

@Effect()
getUserEffect$: Observable<Action> = this.action$.ofType(actions.GETUSER).pipe(
switchMap(() => {
return this.userService.getUserFromServer().pipe(
filter(user => (user !== null)),
map((user: User) => new actions.GetUserSuccessAction(user.username)),
catchError(err => of(new actions.GetUserFailAction(err))),
)
})
)
}
在 constructor() 導入動作 Actions（監聽用），使用者服務 UserService（跟後端連結）跟工具服務 UtilsService （寫入讀出 Localstorage）
Effect 函數使用 this.action$.ofType() “監聽“ 動作 (Action)，處理完“副作用“的部分後，最後會輸出 Observable<Action> 另外的動作
loginEffect$ 監聽 “LOGIN” 的動作，一聽到這個動作，先從動作的payload取出資料，之前我們在定義
export class LoginAction implements Action {
readonly type = LOGIN;

constructor(public payload: User) { }
}
時，已經定義了 payload是 User 型態，接著用 switchMap 來使用 UserService，請回憶一下[ngrx/store -5] 高階 (High Order) Observable，因為 UserService.loginServer() 本身也是 Observable，我們需要用到高階運算子，如果登入成功的話，寫入從後端傳回的 token，分派一個成功的動作LoginSuccessAction 交給 Reducer，前面定義過的 Reducer，就會產生新的狀態

//…省略
switch (action.type) {
case actions.LOGOUT:
return initialState;
case actions.LOGIN_SUCCESS:
case actions.GETUSER_SUCCESS:
return { …state, currentUser: action.payload, isLogin: true };
default:
return state
}
//…
logoutEffect$ 監聽 “LOGOUT” 的動作，簡單的做清除 token
getUserEffect$ 監聽 “GETUSER” 的動作，一樣使用使用者服務，從後端取回使用者名稱，在依後端回覆的狀況，產生GetUserSuccessAction 或是 GetUserFailAction 給 Reducer
第三步：修改 src/app/store/effects/index.ts