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

Single source of truth
State is read-only
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