ngrx State management - quan1997ap/angular-app-note GitHub Wiki

ngrx-learn.7z.txt

Ý tưởng
Book state chứa danh sách books:
books = [ (5) [ books1, books2, ...] ]
Thông tin book: id, name, tag, ...
Collection chứa sanh sách book được chọn

  B1: Tạo 2 state : [ book ] + [ collection ]
    StoreModule.forRoot({ books: booksReducer, collection: collectionReducer }),

  B1: Load danh sách book
    - Viết service call API books.service.ts để lấy danh sách book
    - Định nghĩa action BooksApiActions
    - Định nghĩa books.reducer.ts.
    - Trong app.components.ts gọi this.store.dispatch(BooksApiActions.retrievedBookList({ books }));
      + store.dispatch( Action( Action params ) )
    - Khi này trong store đã có data của Book. - Tạo selectBooks để lấy danh sách Book

  B2: Thêm Book vào Collection
    - State Collection chỉ chứa ID của các Book đã được chọn
    - Vì vậy phải tạo 1 selector mới selectBookCollection.
      + Lấy data từ 2 selector selectBooks + selectCollectionState. ( Để lấy thông tin Book từ danh sách book. Map với id của Collection )
    - Khi call addBook + removeBook thì update state collection

Kết luân

  - B1: Khai báo State & Reducer trong app.module.ts
  - B2: Định nghĩa slector để lấy thông tin của state books.selectors.ts
  - B3: Khai báo các Action sẽ tác động thay đổi state books.actions.ts
  - B4: Triển khai reducer là các hành động sẽ thực thi khi gọi action tương ứng collection.reducer.ts
  - B5: store.dispatch( Action( Action params ). store sẽ thực hiện action