NgRx là gì ? Thử nghiệm với NgRx trong ứng dụng Angular – Xây dựng chức năng login (Phần 2)

Thứ Ba, 19/11/2019

Tram Ho

Bài viết trước mình đã đi qua về các thành phần chính của Ngrx và cách cài đặt.Ở bài viết này mình sẽ hướng dẫn các bạn chức năng Login sử dụng ngRx.

1.Bài toán

Chúng ta sẽ xây dựng xây dựng chức năng login với flow cơ bản như sau :

Nhập email – password để login
Login thành công hiện thông báo thành công , chuyển tới trang home và hiển thị username
Login thất bại hiện thông báo thất bại

Bây giờ chúng ta cùng xem với Ngrx thì bài toán này sẽ được giải quyết như nào nhé.

2.Thực hiện

Như ở bài viết trước mình đã nói về các
thành phần của Ngrx.Bây giờ chúng ta cùng đi xây dựng nó nhé !

Đầu tiên cần tạo folder Store ,folder Store này sẽ là nơi chứa các Entity – thực thể, với bài toán của chúng ta thì Entity sẽ là User.Mỗi Entity này
sẽ gồm 4 thành phần chính :

Actions
State
Reducer
Selector

Chúng ta cùng đi vào chi tiết từng phần nhé !

Actions (user.actions.ts)

Tại file này chúng ta cần định nghĩa các Action

<span class="token keyword">import</span> <span class="token punctuation">{</span> Action <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@ngrx/store'</span><span class="token punctuation">;</span>

<span class="token comment">// định nghĩa type cho user action</span>
<span class="token keyword">export</span> <span class="token keyword">enum</span> EUserActions <span class="token punctuation">{</span>
    <span class="token constant">LOGIN</span> <span class="token operator">=</span> <span class="token string">'[USER] Login'</span><span class="token punctuation">,</span>
    <span class="token constant">LOGIN_SUCCESS</span> <span class="token operator">=</span> <span class="token string">'[USER] Login Success'</span><span class="token punctuation">,</span>
    <span class="token constant">LOGIN_FAIL</span> <span class="token operator">=</span> <span class="token string">'[USER] Login Fail'</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">Login</span> <span class="token keyword">implements</span> <span class="token class-name">Action</span> <span class="token punctuation">{</span>
    <span class="token keyword">public</span> readonly <span class="token keyword">type</span> <span class="token operator">=</span> EUserActions<span class="token punctuation">.</span><span class="token constant">LOGIN</span><span class="token punctuation">;</span>
    <span class="token keyword">constructor</span><span class="token punctuation">(</span><span class="token keyword">public</span> payload<span class="token punctuation">:</span> <span class="token punctuation">{</span> email<span class="token punctuation">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span> password<span class="token punctuation">:</span> <span class="token builtin">string</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">LoginSuccess</span> <span class="token keyword">implements</span> <span class="token class-name">Action</span> <span class="token punctuation">{</span>
    <span class="token keyword">public</span> readonly <span class="token keyword">type</span> <span class="token operator">=</span> EUserActions<span class="token punctuation">.</span><span class="token constant">LOGIN_SUCCESS</span><span class="token punctuation">;</span>
    <span class="token keyword">constructor</span><span class="token punctuation">(</span><span class="token keyword">public</span> payload<span class="token punctuation">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">LoginFail</span> <span class="token keyword">implements</span> <span class="token class-name">Action</span> <span class="token punctuation">{</span>
    <span class="token keyword">public</span> readonly <span class="token keyword">type</span> <span class="token operator">=</span> EUserActions<span class="token punctuation">.</span><span class="token constant">LOGIN_FAIL</span><span class="token punctuation">;</span>
    <span class="token keyword">constructor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">type</span> UserActions <span class="token operator">=</span> Login <span class="token operator">|</span> LoginSuccess <span class="token operator">|</span> LoginFail<span class="token punctuation">;</span>

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

// định nghĩa type cho user action

export enum EUserActions {

LOGIN = '[USER] Login',

LOGIN_SUCCESS = '[USER] Login Success',

LOGIN_FAIL = '[USER] Login Fail'

}

export class Login implements Action {

public readonly type = EUserActions.LOGIN;

constructor(public payload: { email: string, password: string }) { }

}

export class LoginSuccess implements Action {

}

export class LoginFail implements Action {

constructor() { }

}

export type UserActions = Login | LoginSuccess | LoginFail;

State (user.states.ts)

Tại file này chúng ta định nghĩa state được lưu trong store

<span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">IUserLoginState</span> <span class="token punctuation">{</span>
    loading<span class="token punctuation">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
    success<span class="token punctuation">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
    fail<span class="token punctuation">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
    userName<span class="token punctuation">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">IUserState</span> <span class="token punctuation">{</span>
    login<span class="token punctuation">:</span> IUserLoginState<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

export interface IUserLoginState {

loading: boolean;

success: boolean;

fail: boolean;

userName: string;

}

export interface IUserState {

}

Reducer (user.reducer.ts)

Tại đây,dữ liệu sẽ được xử lý trước khi được “Đẩy” vào store

<span class="token keyword">import</span> <span class="token punctuation">{</span> UserActions<span class="token punctuation">,</span> EUserActions <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./user.actions'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> IUserState<span class="token punctuation">,</span> IUserLoginState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./user.states'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> initLoginState<span class="token punctuation">:</span> IUserLoginState <span class="token operator">=</span> <span class="token punctuation">{</span>
    loading<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    success<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    fail<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    userName<span class="token punctuation">:</span> <span class="token string">''</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> initUserState<span class="token punctuation">:</span> IUserState <span class="token operator">=</span> <span class="token punctuation">{</span>
    login<span class="token punctuation">:</span> initLoginState
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">userReducer</span><span class="token punctuation">(</span>state <span class="token operator">=</span> initUserState<span class="token punctuation">,</span> action<span class="token punctuation">:</span> UserActions<span class="token punctuation">)</span><span class="token punctuation">:</span> IUserState <span class="token punctuation">{</span>
    <span class="token keyword">switch</span> <span class="token punctuation">(</span>action<span class="token punctuation">.</span><span class="token keyword">type</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">case</span> EUserActions<span class="token punctuation">.</span><span class="token constant">LOGIN</span><span class="token punctuation">:</span>
            <span class="token keyword">return</span> <span class="token punctuation">{</span>
<span class="token operator">&gt;</span>                 <span class="token operator">...</span>state<span class="token punctuation">,</span>
                login<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span>initLoginState<span class="token punctuation">,</span> loading<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">;</span>
        <span class="token keyword">case</span> EUserActions<span class="token punctuation">.</span><span class="token constant">LOGIN_SUCCESS</span><span class="token punctuation">:</span>
            <span class="token keyword">return</span> <span class="token punctuation">{</span>
                <span class="token operator">...</span>state<span class="token punctuation">,</span>
                login<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span>state<span class="token punctuation">.</span>login<span class="token punctuation">,</span> loading<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> success<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> userName<span class="token punctuation">:</span> action<span class="token punctuation">.</span>payload  <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">;</span>
        <span class="token keyword">case</span> EUserActions<span class="token punctuation">.</span><span class="token constant">LOGIN_FAIL</span><span class="token punctuation">:</span>
            <span class="token keyword">return</span> <span class="token punctuation">{</span>
                <span class="token operator">...</span>state<span class="token punctuation">,</span>
                login<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span>state<span class="token punctuation">.</span>login<span class="token punctuation">,</span> loading<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> fail<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">;</span>
        <span class="token keyword">default</span><span class="token punctuation">:</span>
            <span class="token keyword">return</span> state<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

import { UserActions, EUserActions } from './user.actions';

import { IUserState, IUserLoginState } from './user.states';

const initLoginState: IUserLoginState = {

loading: false,

success: false,

fail: false,

userName: ''

};

const initUserState: IUserState = {

};

export function userReducer(state = initUserState, action: UserActions): IUserState {

switch (action.type) {

case EUserActions.LOGIN:

return {

> ...state,

login: { ...initLoginState, loading: true}

};

case EUserActions.LOGIN_SUCCESS:

return {

...state,

login: { ...state.login, loading: false, success: true, userName: action.payload }

};

case EUserActions.LOGIN_FAIL:

return {

...state,

login: { ...state.login, loading: false, fail: true }

};

default:

return state;

}

Ok.bây giờ để Reducer hoạt động chúng ta cần “Register” Reducer với Store

/store/index.ts

<span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> fromUser <span class="token keyword">from</span> <span class="token string">'./user'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> ActionReducerMap <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@ngrx/store'</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">IAppState</span> <span class="token punctuation">{</span>
    user<span class="token punctuation">:</span> fromUser<span class="token punctuation">.</span>IUserState<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">const</span> appReducer<span class="token punctuation">:</span> ActionReducerMap<span class="token operator">&lt;</span>IAppState<span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
    user<span class="token punctuation">:</span> fromUser<span class="token punctuation">.</span>userReducer
<span class="token punctuation">}</span><span class="token punctuation">;</span>

import * as fromUser from './user';

import { ActionReducerMap } from '@ngrx/store';

export interface IAppState {

user: fromUser.IUserState;

}

export const appReducer: ActionReducerMap<IAppState> = {

user: fromUser.userReducer

};

app.module.ts

<span class="token keyword">import</span> <span class="token punctuation">{</span> BrowserModule <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@angular/platform-browser'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> NgModule <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@angular/core'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> FormsModule<span class="token punctuation">,</span> ReactiveFormsModule <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@angular/forms'</span><span class="token punctuation">;</span>

<span class="token keyword">import</span> <span class="token punctuation">{</span> AppRoutingModule <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./app-routing.module'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> AppComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./app.component'</span><span class="token punctuation">;</span>

<span class="token keyword">import</span> <span class="token punctuation">{</span> LoginComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./login/login.component'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> HomeComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./home/home.component'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> HttpClientModule <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@angular/common/http'</span><span class="token punctuation">;</span>

<span class="token keyword">import</span> <span class="token punctuation">{</span> appReducer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./store'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> EffectsModule <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@ngrx/effects'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> AppEffects <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./effects'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> StoreModule <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@ngrx/store'</span><span class="token punctuation">;</span>


@<span class="token function">NgModule</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  declarations<span class="token punctuation">:</span> <span class="token punctuation">[</span>
    AppComponent<span class="token punctuation">,</span>
    LoginComponent<span class="token punctuation">,</span>
    HomeComponent
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  imports<span class="token punctuation">:</span> <span class="token punctuation">[</span>
    BrowserModule<span class="token punctuation">,</span>
    AppRoutingModule<span class="token punctuation">,</span>
    HttpClientModule<span class="token punctuation">,</span>
    FormsModule<span class="token punctuation">,</span>
    ReactiveFormsModule<span class="token punctuation">,</span>
    StoreModule<span class="token punctuation">.</span><span class="token function">forRoot</span><span class="token punctuation">(</span>appReducer<span class="token punctuation">)</span><span class="token punctuation">,</span>
    EffectsModule<span class="token punctuation">.</span><span class="token function">forRoot</span><span class="token punctuation">(</span>AppEffects<span class="token punctuation">)</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  providers<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  bootstrap<span class="token punctuation">:</span> <span class="token punctuation">[</span>AppComponent<span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">AppModule</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span>

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { LoginComponent } from './login/login.component';

import { HomeComponent } from './home/home.component';

import { HttpClientModule } from '@angular/common/http';

import { appReducer } from './store';

import { EffectsModule } from '@ngrx/effects';

import { AppEffects } from './effects';

import { StoreModule } from '@ngrx/store';

@NgModule({

declarations: [

AppComponent,

LoginComponent,

HomeComponent

],

imports: [

BrowserModule,

AppRoutingModule,

HttpClientModule,

FormsModule,

ReactiveFormsModule,

StoreModule.forRoot(appReducer),

EffectsModule.forRoot(AppEffects)

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Đến đây chúng ta đã hoàn thành được 2/3 rồi.Tiếp theo chúng thực hiện việc Call Api để login.Ngrx cung cấp 1 package rất hay để xử lý việc
này là NgxEffect(các bạn tự tìm hiểu phần này nhé).
Tương tự với store chúng ta tạo folder effects

Effects

user.effects.ts

<span class="token keyword">import</span> <span class="token punctuation">{</span> Injectable <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@angular/core"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Effect<span class="token punctuation">,</span> Actions<span class="token punctuation">,</span> ofType <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@ngrx/effects'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> switchMap<span class="token punctuation">,</span> map<span class="token punctuation">,</span> catchError <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'rxjs/operators'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> <span class="token keyword">of</span> <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'rxjs'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> UserService <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'../user.service'</span><span class="token punctuation">;</span>

<span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> fromUser <span class="token keyword">from</span> <span class="token string">'../store/user'</span><span class="token punctuation">;</span>

@<span class="token function">Injectable</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">UserEffects</span> <span class="token punctuation">{</span>
    <span class="token keyword">constructor</span><span class="token punctuation">(</span><span class="token keyword">private</span> actions<span class="token punctuation">:</span> Actions<span class="token punctuation">,</span> <span class="token keyword">private</span> userService<span class="token punctuation">:</span> UserService<span class="token punctuation">)</span> <span class="token punctuation">{</span>

    <span class="token punctuation">}</span>
    @<span class="token function">Effect</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    login$ <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>actions<span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span>
        ofType<span class="token operator">&lt;</span>fromUser<span class="token punctuation">.</span>Login<span class="token operator">&gt;</span><span class="token punctuation">(</span>fromUser<span class="token punctuation">.</span>EUserActions<span class="token punctuation">.</span><span class="token constant">LOGIN</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token function">switchMap</span><span class="token punctuation">(</span>action <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            <span class="token keyword">const</span> <span class="token punctuation">{</span> email<span class="token punctuation">,</span> password <span class="token punctuation">}</span> <span class="token operator">=</span> action<span class="token punctuation">.</span>payload<span class="token punctuation">;</span>
            <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>userService<span class="token punctuation">.</span><span class="token function">login</span><span class="token punctuation">(</span>email<span class="token punctuation">,</span> password<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span>
                <span class="token function">map</span><span class="token punctuation">(</span>res <span class="token operator">=&gt;</span> <span class="token keyword">new</span> <span class="token class-name">fromUser<span class="token punctuation">.</span>LoginSuccess</span><span class="token punctuation">(</span>email<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                <span class="token function">catchError</span><span class="token punctuation">(</span>e <span class="token operator">=&gt;</span> <span class="token keyword">of</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">fromUser<span class="token punctuation">.</span>LoginFail</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
            <span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

import { Injectable } from "@angular/core";

import { Effect, Actions, ofType } from '@ngrx/effects';

import { switchMap, map, catchError } from 'rxjs/operators';

import { of } from 'rxjs';

import { UserService } from '../user.service';

import * as fromUser from '../store/user';

@Injectable()

export class UserEffects {

constructor(private actions: Actions, private userService: UserService) {

}

@Effect()

login$ = this.actions.pipe(

ofType<fromUser.Login>(fromUser.EUserActions.LOGIN),

switchMap(action => {

const { email, password } = action.payload;

return this.userService.login(email, password).pipe(

map(res => new fromUser.LoginSuccess(email)),

catchError(e => of(new fromUser.LoginFail()))

);

})

);

};

./effects/index.ts

<span class="token keyword">import</span> <span class="token punctuation">{</span> UserEffects <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./user.effects'</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">const</span> AppEffects <span class="token operator">=</span> <span class="token punctuation">[</span>UserEffects<span class="token punctuation">]</span><span class="token punctuation">;</span>

import { UserEffects } from './user.effects';

export const AppEffects = [UserEffects];

Components

<span class="token keyword">import</span> <span class="token punctuation">{</span> Component<span class="token punctuation">,</span> OnInit<span class="token punctuation">,</span> OnDestroy <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@angular/core'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> FormGroup<span class="token punctuation">,</span> FormBuilder <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@angular/forms'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> fromRoot <span class="token keyword">from</span> <span class="token string">'../store/index'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> fromUser <span class="token keyword">from</span> <span class="token string">'../store/user'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Store <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@ngrx/store'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Observable<span class="token punctuation">,</span> Subject <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'rxjs'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> takeUntil<span class="token punctuation">,</span> filter<span class="token punctuation">,</span> delay <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'rxjs/operators'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Router <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@angular/router'</span><span class="token punctuation">;</span>

@<span class="token function">Component</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  selector<span class="token punctuation">:</span> <span class="token string">'app-login'</span><span class="token punctuation">,</span>
  templateUrl<span class="token punctuation">:</span> <span class="token string">'./login.component.html'</span><span class="token punctuation">,</span>
  styleUrls<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'./login.component.scss'</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">LoginComponent</span> <span class="token keyword">implements</span> <span class="token class-name">OnInit</span><span class="token punctuation">,</span> OnDestroy <span class="token punctuation">{</span>
  loginForm<span class="token punctuation">:</span> FormGroup<span class="token punctuation">;</span>

  loading$<span class="token punctuation">:</span> Observable<span class="token operator">&lt;</span><span class="token builtin">boolean</span><span class="token operator">&gt;</span><span class="token punctuation">;</span>
  success$<span class="token punctuation">:</span> Observable<span class="token operator">&lt;</span><span class="token builtin">boolean</span><span class="token operator">&gt;</span><span class="token punctuation">;</span>
  error$<span class="token punctuation">:</span> Observable<span class="token operator">&lt;</span><span class="token builtin">boolean</span><span class="token operator">&gt;</span><span class="token punctuation">;</span>
  destroy$<span class="token punctuation">:</span> Subject<span class="token operator">&lt;</span><span class="token keyword">void</span><span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Subject</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">constructor</span><span class="token punctuation">(</span>
    <span class="token keyword">private</span> fb<span class="token punctuation">:</span> FormBuilder<span class="token punctuation">,</span>
    <span class="token keyword">private</span> store<span class="token punctuation">:</span> Store<span class="token operator">&lt;</span>fromRoot<span class="token punctuation">.</span>IAppState<span class="token operator">&gt;</span><span class="token punctuation">,</span>
    <span class="token keyword">private</span> router<span class="token punctuation">:</span> Router
  <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span>

  <span class="token function">ngOnInit</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>loading$ <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>store<span class="token punctuation">.</span><span class="token function">select</span><span class="token punctuation">(</span>fromUser<span class="token punctuation">.</span>getLoadingLogin<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span><span class="token function">takeUntil</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>destroy$<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>success$ <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>store<span class="token punctuation">.</span><span class="token function">select</span><span class="token punctuation">(</span>fromUser<span class="token punctuation">.</span>getSuccessLogin<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span><span class="token function">takeUntil</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>destroy$<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>error$ <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>store<span class="token punctuation">.</span><span class="token function">select</span><span class="token punctuation">(</span>fromUser<span class="token punctuation">.</span>getFailLogin<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span><span class="token function">takeUntil</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>destroy$<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">initForm</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">onLoginSucess</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token function">ngOnDestroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>destroy$<span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>destroy$<span class="token punctuation">.</span><span class="token function">complete</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token function">initForm</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>loginForm <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>fb<span class="token punctuation">.</span><span class="token function">group</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      email<span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
      password<span class="token punctuation">:</span> <span class="token string">''</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token function">submit</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> email<span class="token punctuation">,</span> password <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>loginForm<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">fromUser<span class="token punctuation">.</span>Login</span><span class="token punctuation">(</span><span class="token punctuation">{</span> email<span class="token punctuation">,</span> password <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token function">onLoginSucess</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>success$<span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span>
      <span class="token function">filter</span><span class="token punctuation">(</span>success <span class="token operator">=&gt;</span> success<span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token comment">//đợi 3s sau khi login thành công,chuyển tới home page</span>
      <span class="token function">delay</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span>success <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>router<span class="token punctuation">.</span><span class="token function">navigate</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'home'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

import { Component, OnInit, OnDestroy } from '@angular/core';

import { FormGroup, FormBuilder } from '@angular/forms';

import * as fromRoot from '../store/index';

import * as fromUser from '../store/user';

import { Store } from '@ngrx/store';

import { Observable, Subject } from 'rxjs';

import { takeUntil, filter, delay } from 'rxjs/operators';

import { Router } from '@angular/router';

@Component({

selector: 'app-login',

templateUrl: './login.component.html',

styleUrls: ['./login.component.scss']

})

export class LoginComponent implements OnInit, OnDestroy {

loginForm: FormGroup;

loading$: Observable<boolean>;

success$: Observable<boolean>;

error$: Observable<boolean>;

destroy$: Subject<void> = new Subject();

constructor(

private fb: FormBuilder,

private store: Store<fromRoot.IAppState>,

private router: Router

) { }

ngOnInit() {

this.loading$ = this.store.select(fromUser.getLoadingLogin).pipe(takeUntil(this.destroy$));

this.success$ = this.store.select(fromUser.getSuccessLogin).pipe(takeUntil(this.destroy$));

this.error$ = this.store.select(fromUser.getFailLogin).pipe(takeUntil(this.destroy$));

this.initForm();

this.onLoginSucess();

}

ngOnDestroy() {

this.destroy$.next();

this.destroy$.complete();

}

initForm() {

this.loginForm = this.fb.group({

email: '',

password: ''

});

}

submit() {

const { email, password } = this.loginForm.value;

this.store.dispatch(new fromUser.Login({ email, password }));

}

onLoginSucess() {

this.success$.pipe(

filter(success => success),

//đợi 3s sau khi login thành công,chuyển tới home page

delay(3000),

).subscribe(success => {

this.router.navigate(['home']);

});

}

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-center<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Login Page<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>alert alert-danger<span class="token punctuation">"</span></span> <span class="token attr-name">*ngIf</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>error$ | async<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    Login fail
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>alert alert-success<span class="token punctuation">"</span></span> <span class="token attr-name">*ngIf</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>success$ | async<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    Login success
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>login-form<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">(submit)</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>submit()<span class="token punctuation">"</span></span> <span class="token attr-name">[formGroup]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>loginForm<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-group<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>username<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Username<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>username<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Enter email<span class="token punctuation">"</span></span> <span class="token attr-name">formControlName</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-group<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Password<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Password<span class="token punctuation">"</span></span> <span class="token attr-name">formControlName</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-center<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>spinner-border<span class="token punctuation">"</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>status<span class="token punctuation">"</span></span> <span class="token attr-name">*ngIf</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>loading$ | async<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>sr-only<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Loading...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>btn btn-primary<span class="token punctuation">"</span></span> <span class="token attr-name">[disabled]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>loading$ | async<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Login<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<h3 class="text-center">Login Page</h3>

</div>

</div>

<label for="username">Username</label>

</div>

<label for="password">Password</label>

</div>

<span class="sr-only">Loading...</span>

</div>

<button type="submit" class="btn btn-primary" [disabled]="loading$ | async">Login</button>

</form>

</div>

Kết quả

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

NgRx là gì ? Thử nghiệm với NgRx trong ứng dụng Angular – Xây dựng chức năng login (Phần 2)

1.Bài toán

2.Thực hiện

Actions (user.actions.ts)

State (user.states.ts)

Reducer (user.reducer.ts)

Effects

Components

Kết quả

Chế tạo thành công sơn 'siêu trắng' có thể phản xạ 95,5% ánh sáng, giúp nhà mát mẻ mà không cần điều hòa

Loạt ứng dụng cực hữu ích sau khi cài Windows 10 khiến bạn ước giá như mình biết sớm hơn

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu