ngrx

What is Application State? (State stays in store)

  • Server response data
  • User information
  • User input
  • UI state
  • Router/location state

We compose application state in our Store.

State Management Libraries

  • Model our app state
  • Update state
  • Read state values
  • Monitor/observe changes to state

Redux: Three Principles

  1. Single source of truth
  2. State is read-only
  3. Pure Functions update state

Single source of truth

  • One state tree inside Store
  • Predictability, maintainability
  • Universal apps (SSR)
  • Testing and debugging

State is read-only

  • Derive properties from state
  • Dispatch actions to change the state
  • Immutable update patterns

Pure functions update state

  • Pure functions are reducers
  • Reducers respond to action types
  • Reducers return new state

Redux: Core Concepts

  • Single state tree
  • Actions
  • Reducers
  • Store
  • One-way dataflow

Single State Tree

  • Plain JavaScript Object
  • Composed by reducers
const state = {
todos:[]
};

Actions

  • Two properties:
    type: string, describes event payload: optional data
  • Dispatch actions to reducers
const action = {
type: 'ADD_TODO',
payload: {
label: 'Eat pizza',
complete: false
}
}

Reducers

  • Pure functions
  • Given dispatched action
    • Responds to action.type
    • Access to action.payload
    • Composes new state
    • Returns new state
function reducer(state, action) {
switch(action.type) {
case 'ADD_TODO': {
const todo = action.payload;
const todos = [...state.todos, todo];
return { todos };
}
}

return state;
}
const state = {
todos: [
{ label: 'Eat pizza', complete: false }
]
};

Store

  • State container
  • Components interact with the Store
    • Subscribe to slices of State
    • Dispatch Actions to Store
  • Store invvokes Reducers with pervious State and Action
  • Reducers compose new State
  • Store is updated, notifies subscibers

One-way dataflow

                       --------------------------------------
        Dispatch       |            ---------- Sent to      |
     ------------------|----------->| Action |--------      |
     |                 |            ----------       |      |
     |                 |                             |      |
     |                 |                             V      |
-------------          |                        ----------- |
| component |          |    Store               | Reducer | |
-------------          |                        ----------- |
     ^                 |                             |      |
     |                 |                             |      |     
     |  Render         |            ---------        |      |
     ------------------|------------| State |<--------      |
                       |            --------- New State     |
                       --------------------------------------

Immutable and Mutable Javascript

An immutable object is an object whose state cannot be modifies after creation.

Why Immutable ?

  • Predictability
  • Explicit state changes
  • Performance (Change Detection)
  • Mutation Tracking
  • Undo state changes

Mutability in JavaScript

  • Functions
  • Objects
  • Arrays

Immutability in JavaScript

  • Strings
  • Numbers
const character = { name: 'Han Solo' };

// Object.assign({}, character, { role: 'Captain'});
const updatedCharacter = {...character, role: 'Captain'};

// { name: 'Han Solo' };
console.log(character);
// { name: 'Han Solo', role: 'Captain' };
console.log(updatedCharacter);

ngrx/effect

listen for ngrx/store actions

Isolate side effects from components

Communicate outside of Angular

Effects flow

                       -------------------------------------- ------------
        Dispatch       |            ---------- Sent to      | | Effects  | 
     ------------------|----------->| Action |--------      | |          | 
     |                 |            ----------       |      | |          |
     |                 |                             |      | |          |
     |                 |                             V      | |  EFFEC   |
-------------          |                        ----------- | |          |
| component |          |    Store               | Reducer | | |          |
-------------          |                        ----------- | |          |
     ^                 |                             |      | |          |
     |                 |                             |      | |          |    
     |  Render         |            ---------        |      | |          |
     ------------------|------------| State |<--------      | |          |
                       |            --------- New State     | |          |
                       -------------------------------------- ------------
ng generate m cover --routing
ng generate @ngrx/schematics:action scenario/quote --group --spec
ng generate @@ngrx/schematics:feature quote/benefits -m quote/quote.module.ts --group --reducers selectors/index.ts
ng generate @ngrx/schematics:store cover/Cover -m cover.module.ts --statePath selectors

Youtube

You might not need NgRx | Mike Ryan | AngularConnect 2018

Angular: when ngrx is an overkill

State Management Patterns and Best Practices with NgRx – Victor Savkin – AngularConnect 2017

NgRx Selectors How to stop worrying about your Store structure - David East & Todd Motto

Reducing the Boilerplate with NgRx - Brandon Roberts & Mike Ryan

Good Action Hygiene with NgRx Mike Ryan

Authentication with NgRx - Brandon Roberts

Reactive Testing Strategies with NgRx - Brandon Roberts & Mike Ryan

Just Another Marble Monday – Unit Testing NGRX RxJS with Marbles - Sam Brennan & Keith Stewart

NgRx Schematics - Vitalii Bobrov

Ionic, ngrx and Angular: building web and mobile apps with one code base - Duncan Hunter

RXJS Observables in Angular - Ward Bell & Sander Ellis