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!
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
- Implement a
@Effect loadAllTicket$
property that usesthis.actions.pipe()
forTicketActionTypes.LOAD_ALL_TICKETS
, callsticketService.getTickets()
and then dispatches a LoadTicketsDone action. - Implement a
@Effect loadTicket$
property that usesthis.actions.pipe()
forTicketActionTypes.LOAD_TICKET
, callsticketService.ticketById()
and then dispatches a LoadTicketDone action.
Do not forget to register this Effects class in the
tickets-state.module.ts
EffectsModule.forFeature()
- Remove the usage of
this.service.getTickets()
- Simply dispatch a
LoadTickets
action.
- Dispatch a
LoadTicket
action in thengOnInit()
Why are we dispatching a LoadTicket action in the TicketDetails component? What issue does this solve.
Open the Redux DevTools in Browser and watch the state changes and you route in the Customer-Portal application.
Install Chrome Extension: Redux DevTools
- 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
.
Go to NgRx Lab #4: Use Entity-like Pattern