Exercise: Map Zoom

NgRx Store

Excerise: Map Zoom

To begin, checkout the 03-store-exercise branch:

git checkout 03-store-exercise

🤫 The solution branch is available if you get stuck.

You can checkout the solution via:

git checkout 03-store-exercise-solution


  • Practice declaring actions.
  • Practice declaring a reducer function.
  • Practice declaring projector functions and selectors.
  • Practice injecting the Store singleton instance.
  • Practice selecting a slice of data from the state object.


  1. Create a new directory at src/app/state/map.
  2. Declare a SetMapZoom action in a new file at src/app/state/map/map.actions.ts.
  3. Declare the reducer() function in a new file at src/app/state/map/map.reducer.ts to update the zoom property of the current feature state.
  4. Declare the getZoom projector function that returns the value of the zoom property.
  5. Update the Features enum in src/app/state/index.ts with a new map member.
  6. Update the State interface and the reducers map in src/app/state/index.ts.
  7. Create a mapState() feature selector in src/app/state/index.ts.
  8. Create a mapZoom() selector in src/app/state/index.ts.
  9. Update the ResortsMapComponent.zoom property to be a component input. This enables us to bind the zoom level of the map from a container component.
  10. Update the DashboardComponent class with a new mapZoom property.
  11. Update the DashboardComponent.nOnInit() lifecycle method to select the zoom value in state.

Try it Out

Use the Redux Devtools to dispatch the following action:

  type: '[Map] Set Zoom',
  zoom: 8

The map zoom level should update based on the zoom value specified.


Site © by LiveLoveApp, LLC

We Can Help!

Need help with your Angular and NgRx project?

Hire Us