Skip to content

Latest commit

 

History

History
134 lines (70 loc) · 4.42 KB

lab-1.md

File metadata and controls

134 lines (70 loc) · 4.42 KB
Raw

NgRx Lab 1: Actions, Reducers, and Selectors

image

Scenario

We have a Customer Portal application with TicketList and TicketDetails view components. Each component uses the HttpClient to load appropriate ticket data and store that data directly into the component.

This is poor design since these components:

  • do not share the data...
  • always reload the data [since routing creates new instances of the views]...
  • contain business logic to load the data

Let's use NgRx to store the data in a *Tickets NgRx state layer. This lab (and the subsequent 6 other labs) will show developers how to use NgRx features and the beneficial impacts of NgRx on view components.

We already did some NgRx setup for you...

  • The Customer Portal application already has its apps/customer-portal/src/app/app.module.ts configured with NgRx
  • A TicketsState feature library libs/tickets-state with NgRx has also been created with initial actions, reducer, and selectors; but this feature has not yet been registered with the NgRx store.

Take a moment to explore those files to quickly familiarize yourself with the NgRx artifacts and setup.


Code Instructions

In this lab, you will:

  • Use a LoadTicketsDone actions to store REST ticket data in the NgRx store
  • Use a tickets reducer to process the LoadTicketsDone action
  • Use tickets selectors to build queries (into the NgRx state) for future ticket push-data

In tickets-state.module.ts
  1. Use StoreModule.forFeature() to register the Tickets feature with the ticketsReducer and FEATURE_TICKETS.
In ticket-details.component.ts
  1. Inject the store: Store<PartialAppState> in the constructor
  2. In ngOnInit(), use ticketsQuery.getAllTickets with store.pipe(select()) to get a list of all available tickets and then use the router param ticket id to extract the ticket.
  3. When the service.ticketById(id) returns the ticket, save that ticket to the NgRx state using LoadTicketDone()

The tickets.reducer.ts already handles the LoadTicketDone action... so no more work is needed here.

In ticket-list.component.ts
  1. Inject the store: Store<PartialAppState> in the constructor
  2. In constructor, use the HttpClient ticketService.getTickets() to load the tickets and then save the ticket data to the NgRx state by dispatching a new LoadTicketsDone() action.
  3. Prepare the tickets$ : Observable<Ticket[]> property using this.store.pipe(select()) instead of the HttpClient service.

Do not use imports that by-pass the library public api. E.g. import { LoadTicketsDone } from '@tuskdesk-suite/tickets-state/src/...'

In tickets.reducer.ts
  1. Add case TicketActionTypes.LOAD_ALL_TICKETS_DONE: to process the LoadTicketsDone action and update the state.

Code Snippets

tickets-state.module.ts

image

ticket-list.component.ts

ticket-list.component.ts

ticket-details.component.ts

image

tickets.reducer.ts

tickets.reducer.ts



Investigate

This improvement assumes that the NgRx TicketsState will contain the desired ticket for the ticket-details view. In what scenarios will this not work? Also, what would happen if you forgot to update the tickets.reducer.ts to process the LoadTicketsDone action?

Be prepared to discuss these issues and possible workarounds.


Running the Application

Run the following command(s) in individual terminals:

yarn server
yarn customer-portal -- -o

If you already have one(s) running and need to restart, you can stop the run with ctrl+c.



Next Lab

Go to NgRx Lab #2: Composed Store Selectors