lab-3.md

NgRx Lab 3: Effects and Redux Tools

Scenario

Our Tickets view components use the HttpClient service to directly load ticket REST data. This is another poor design... views should never know how to load REST data.

Such async activity should be relegated to NgRx Effects classes!

Code Instructions

In this lab, you will:

• Create an Effects class to handle async activity to load ticket REST data
• Update the view components to remove HttpClient usages; replaced with LoadTicket actions

---

In libs/tickets-state/src/lib/+state/tickets.effects.ts

1. Implement a @Effect loadAllTicket$ property that uses this.actions.pipe() for TicketActionTypes.LOAD_ALL_TICKETS, calls ticketService.getTickets() and then dispatches a LoadTicketsDone action.
2. Implement a @Effect loadTicket$ property that uses this.actions.pipe() for TicketActionTypes.LOAD_TICKET, calls ticketService.ticketById() and then dispatches a LoadTicketDone action.

Do not forget to register this Effects class in the tickets-state.module.ts EffectsModule.forFeature()

In ticket-list.component.ts

1. Remove the usage of this.service.getTickets()
2. Simply dispatch a LoadTickets action.

In ticket-details.component.ts

1. Dispatch a LoadTicket action in the ngOnInit()

Code Snippets

tickets.effects.ts

tickets-list.component.ts

ticket-details.component.ts

---

Investigate

Why are we dispatching a LoadTicket action in the TicketDetails component? What issue does this solve.

Using Redux DevTools

Open the Redux DevTools in Browser and watch the state changes and you route in the Customer-Portal application.

Install Chrome Extension: Redux DevTools

Running the Application

• Open the Customer Portal application with the browser: http://localhost:4203
• Confirm the Node Server is running with browser page: http://localhost:3000/api/tickets

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 #4: Use Entity-like Pattern