@ngrx/store introduction by example Yannick Baron @yannick_baron Software Architecture Consultant

• user interaction 
 clicks, hovers, inputs, ... • data changes 
 receiving data (e.g. http) 
 continuous data updates (e.g. websockets) • state changes 
 form value changes (e.g. checkbox) 
 collapsible component 
 settings changes Reactive Applications react to

What/where is state?

• router state 
 which route is active 
 route params / query params 
 What/where is state?

• router state 
 which route is active 
 route params / query params • application state 
 active user 
 wishlist items / noti fi cations 
 What/where is state?

• router state 
 which route is active 
 route params / query params • application state 
 active user 
 wishlist items / noti fi cations • component state 
 game details 
 selected video 
 video playing? 
 What/where is state?

• router state 
 which route is active 
 route params / query params • application state 
 active user 
 wishlist items / noti fi cations • component state 
 game details 
 selected video 
 video playing? 
 What/where is state?

Handling state is hard

• subject in a service • combining streams to deliver view model • subscribing via async pipe • OnPush change detection + immutability ➡ performance boost 
 more control over change detection ➡ no unforeseen side effects 
 by updating state from different sources Common Concepts in advanced reactive Angular

• standardised way to handle application state • indirection keeps components clean • Single Responsibility Principle • perfect for if your application is all about state • ideal if several data sources need to be abstracted from 
 (e.g. user change via button click, http request, websocket) • time travel debugging Why @ngrx/store?

Introduction to @ngrx/store by example

• router state 
 route params / query params • application state 
 list of favorites • component state 
 list of entities 
 current entity to edit An example Project

• State (Store) • Selector • Action • Reducer • Effect • @ngrx/component-store @ngrx/store concepts https://ngrx.io/guide/store

• State (Store) • Selector • Action • Reducer @ngrx/store concepts https://ngrx.io/guide/store

State (Store)

• single immutable data structure • de fi nes which data will be held • accessible across the whole app • can be split into feature module states State (Store)

• discuss what goes into the store • think about storing data ef fi ciently • avoid nested data • do not blindly put everything into the store • do not put every single property of every component there • do not duplicate state (if you need to store hundreds of entities consider the @ngrx/entity package) State (Store)

Selector

• reading from the store • pure functions to watch slice of state • combinable • feature selectors to select feature module state • can be used to transform data • use async pipe to subscribe to selects • avoid "synchronous reads" Selector https://ngrx.io/guide/store

Action

• used to communicate with the store • can be dispatched from anywhere • describe unique events Action https://ngrx.io/guide/store

Reducer

• responsible to update the state • reacts to action • synchronous, pure functions without side-effects • nested data leads to complex reducer functions • keep reducers simple Reducer

• State (Store) • Selector • Action • Reducer Concepts so far https://ngrx.io/guide/store

• State (Store) • Selector • Action • Reducer • Effect @ngrx/store concepts https://ngrx.io/guide/store

• State (Store) • Selector • Action • Reducer • Effect • @ngrx/component-store @ngrx/store concepts https://ngrx.io/guide/store COMPONENT-STORE

Effect

COMPONENT-STORE • synchronous and asynchronous side-effects • react to action - dispatch an action (possibly) • use angular services Effect

@ngrx/component-store

COMPONENT-STORE • store-like implementation on component level • stand-alone package • standardised subject-as-a-service • connect to store via selectors @ngrx/component-store

• no nested data • think about what goes into store and how • use component store for local state • do not duplicate state • structure your store into feature module stores • combine selectors + use selectors for transformation • rarely subscribe to selectors • use async pipe + OnPush @ngrx/store advice

It's a wrap! @yannick_baron [email protected]