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)

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

State (user.states.ts)

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

Reducer (user.reducer.ts)

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

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

/store/index.ts

app.module.ts

Đế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

./effects/index.ts

Components

login.component.ts

login.component.html

Kết quả

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo