Advanced @ngrx Recipes



Visualizing data points across regions in Map

A Bar indicator over Map can help visualize data points (eg. user allocation) for any region of the map:

Moreover, heatmaps on different regions can convey more info like what regions have most open tasks to be worked on :


Also, the user can zoom into any region (by simply clicking on a region to zoom into that region on the map OR using google map style zoom at cursor position using mouse wheel or arrow keys) and visualize the user allocation in individual branches of that region:


Also, for allocating users to regions/branches, the manager can drag users to the region on the map OR select the regions in map for any given user.

Interesting Chrome Flags

Toggle Following in Latest Chromium:

Experimental fullscreen exit UI Windows, Linux, Chrome OS

Displays experimental UI to allow mouse and touch input methods to exit fullscreen mode. 

Enable ECMAScript 6 modules Mac, Windows, Linux, Chrome OS, Android

Enables ECMAScript 6 modules support in Blink. 

Experimental contextual omnibox suggestion Mac, Windows, Linux, Chrome OS, Android

Change omnibox contextual suggestions to an experimental source. Note that this is not an on/off switch for contextual omnibox and it only applies to suggestions provided before the user starts typing a URL or a search query (i.e. zero suggest). 

New omnibox answers in suggest types Mac, Windows, Linux, Chrome OS, Android

Enables new types of answers in the omnibox suggest drop-down: currency conversions, dictionary definitions, sports scores, translations, and when is. 

Omnibox entity suggestions Mac, Windows, Linux, Chrome OS

Enable receiving entity suggestions – disambiguation descriptions – for Omnibox suggestions. 

Custom-drawn Windows 10 Titlebar Windows

If enabled, Chrome will draw the titlebar and caption buttons instead of deferring to Windows. 

Enable Material Design bookmarks Mac, Windows, Linux, Chrome OS

If enabled, the chrome://bookmarks/ URL loads the Material Design bookmarks page. 

Simplified full screen / mouse lock UI. Windows, Linux, Chrome OS

A simplified new user experience when entering page-triggered full screen or mouse pointer lock states. 

WebVR Mac, Windows, Linux, Chrome OS, Android

Enabling this option allows web applications to access experimental Virtual Reality APIs. 

Windowing related features for desktop PWAs. Mac, Windows, Linux, Chrome OS

Enable experimental windowing features for desktop PWAs. 

Only Auto-Reload Visible Tabs Mac, Windows, Linux, Chrome OS, Android

Pages that fail to load while the browser is offline will only be auto-reloaded if their tab is visible. 

Material Design in the rest of the browser’s native UI Mac, Windows, Linux, Chrome OS

Extends the –top-chrome-md setting to secondary UI (bubbles, dialogs, etc.). On Mac, this enables MacViews, which uses toolkit-views for native browser dialogs. 

UI Layout for the browser’s top chrome Mac, Windows, Linux, Chrome OS

Toggles between normal and touch (formerly “hybrid”) layouts. 

Experimental Web Platform features Mac, Windows, Linux, Chrome OS, Android

Enables experimental Web Platform features that are in development. 

Developer Tools experiments Mac, Windows, Linux, Chrome OS

Enables Developer Tools experiments. Use Settings panel in Developer Tools to toggle individual experiments. 

Experimental JavaScript Mac, Windows, Linux, Chrome OS, Android

Enable web pages to use experimental JavaScript features. 

Experimental Validate Asm.js and convert to WebAssembly when valid. Mac, Windows, Linux, Chrome OS, Android

Validate Asm.js when “use asm” is present and then convert to WebAssembly. 

WebAssembly structured cloning support. Mac, Windows, Linux, Chrome OS, Android

Enable web pages to use WebAssembly structured cloning. 
New style notification Mac, Windows, Linux, Chrome OS

Enables the experiment style of material-design notification 
Enable Material Design extensions Mac, Windows, Linux, Chrome OS

If enabled, the chrome://extensions/ URL loads the Material Design extensions page. 

NgRx: Patterns and Techniques



  • Programming with NgRx is programming with messages. In NgRx they are called actions. To start an interaction a component or a service creates an action, populates it with data, and then dispatches it. The component does not mutate any state in place.
  • As in most messaging systems, NgRx actions are reified, i.e., they are represented as concrete objects and they can be stored and passed around.
  • Workflow: The action is received and processed, which can be done in two ways.

    • First, an action can be processed by a reducer — a synchronous pure function creating applications states. It does it by applying an action to the current state of the application.
    • Second, an action can be processed by an effects class. An effects class taps into the Actions object (an observable of all the actions flowing through the app) to execute the needed side effects.
    • Finally, the component often reacts to the state changes by subscribing to the store. The following component gets an observable of todos. Any time a todo gets added, removed, or updated, that observable will emit a new array, which the component will display.
  • Actions
    • Actions can be divided into the following three categories: commands, documents, events.
      • Dispatching a command is akin to invoking a method: we want to do something specific. This means we can only have one place, one handler, for every command. This also means that we may expect a reply: either a value or an error. To indicate that an action is a command I name them starting with a verb Eg. ADD_TODO

      • When dispatching a document, we notify the application that some entity has been updated — we do not have a particular single handler in mind. This means that we do not get any result and there might be more than one handler. Dispatching a document is less procedural. Name documents using nouns or noun phrases

      • When dispatching an event, we notify the application about an occured change. As with documents, we do not get a reply and there might be more than one handler.
    • We often use several actions to implement an interaction. Here, for instance, we use a command and an event to implement the todo addition. We handle the ADD_TODO command in an effects class, and then the TODO_ADDED event in the reducer.
  • Processing Actions
    • A dispatched action can be processed by effects classes and reducers.
    • Reducers are simple: they are synchronous pure functions creating new application states.
  • Effects Classes
    • Effects classes have three roles:
      • They decide on how to process actions.
        • An action decider determines if an effects class should process a particular action. A decider can also map an action to a different action.
        • Decider can use either Action Type or Payload for making the decision
      • They transform actions into other actions.
        • A splitter maps one action to an array of actions, i.e., it splits an action. This is useful for exactly the same reasons as splitting a method into multiple methods: we can test, decorate, monitor every action independently.
        • An aggregator maps an array of actions to a single action. Aggregator are not as common as say splitters, so RxJs does not come with an operator implementing it. That’s why we had to add some boilerplate to do it ourselves. But could always introduce a custom RxJS operator to help with that.
      • They perform side effects.
    • Building Blocks

      These are the common building blocks used to implement application logic using NgRx:

      The best thing about them is how well they compose.

      Let’s look at a simple scenario first, where we select one type of action, execute needed side effects, and then update the state.

      Often that’s not enough, and we need to implement at a more complex scenario.

      In this scenario we start with a filtering decider, next we use a splitter. We then use a content-based decider for the top action. The bottom one is simpler. After executing the side effects, we aggregate the results and pass them to the reducer.

NgRx 4

Some of the highlights:

  • Official support for lazy loading
  • Simplified testing
  • Redesigned router integration

Of course, there is a lot more great stuff in this release (the improved dev ergonomics and error messages for starters). So check out the ngrx platform repository to find out more.


Links to the current documentation for ngrx 4.x

The sections below cover the changes between the ngrx projects migrating from V1.x/2.x to V4.



Jive Q&A

Create a Jive Discussion. and users will use the reply on the discussion title to post new Questions. The Qs appear in comment like style below the discussion header.

Moderators can use the reply action on the bubble to answer these Qs.