Consuming Context (the Direct Method)

The ContextService instance offers a reference (i.e. store property) to the Angular Eagle Eye context store. This store property is the API through which any client communicates with the context.

Note:

Architectural Decision Time.

While the ContextService instance offers direct communication through its store property, it also allows for an ongoing communication channel in a "set-it-and-forget-it" paradigm.
Streaming.

The best case for direct communication are for one-off scenario. It is better to stream the context when in an environment that calls for a real-time response to context changes.

4 Store Methods

getState(): Provides a static snapshot of the current state. It may accept a list of property paths to target specific properties within the state to fetch and return
resetState(): Please see descriptions in the store page. It may accept a parameterless invocation resulting in a noop.
setState(): Please see descriptions in the store page.

subscribe(...)

-	Provides the API for manual subscription to the context's change and close events.
-	Returns a parameterless void function - the unsubcriber.
-	Accepts a "closing" event type and an observer function to be called before context deactivation.
-	Accepts a "data-updated" event type and an observer function for state changes.

store.subscribe(
    'data-updated', (
        changes : Changes<State>,
        changedPaths : Array<Array<string>>,
        netChanges : Partial<State>,
        mayHaveChangesAt : (tokenizedPath : string[]) => boolean
    ) => void
); // => VoidFunction

"data-updated" event listener params

changes: an object or array holding the original change request payload(s).
changedPaths: an array of tokenized property paths belonging to state properties changed during this request.
netChanges: an object of the final state of all properties in state changed.
mayHaveChangesAt: a function to confirm that a given property path is among the new changes. This path is to be supplied as a tokenized string (i.e. supply ['a', 'b', 'c', '0', 'r'] for 'a.b.c[0].r').

Let's see some code!

monitor/debug.ts

Sharing the store with this debug monitor class.

A simple class instance montoring and reporting changes in the store in realtime.

import { ContextService } from '@webkrafters/ng-eagleeye';

@Injectable({
    providedIn: 'root'
})
export class StoreMonitor {
    private _onEvent;
    private _store;
    private _unsub;
    constructor( private contextService : ContextService ) {
        this._source = this.contextService.store;
    }
    set onEvent( handler ) { this._onEvent = handler }
    get source() { return this._store }
    set source( store ) {
        if( store === this._store ) { return }
        this.cleanup();
        if( !store ) { return }
        this._store = store;
        this._onEvent(() => console.log( 'STATE: ', this._store.getState() ));
        this._unsub = store.subscribe( 'data-updated', this._onEvent );
        this._onEvent();
    }
    cleanup() {
        this._unsub?.();
        this._store = null;
    }
}

app.ts

Attaching this debugger to the app.

import { StoreMonitor } from './monitor/debug';

@Component()
export class AppComponent implements OnDestroy {
    monitor = inject( StoreMonitor );
    ngOnDestroy() {
        this.monitor.cleanup();
    }
};

Pro Tips

State references are always snapshots of the state at the time of access. In essence, the state returned by context.store.getState(...) is not affected by subsequent updates to the store's state. Any updates to this acquired state never affects the context's state. So therefore, the 4 considerations:

use only the context.store.setState(...) to update the context internal store.

context.store.getState(...) must be used to obtain the current state value.

use your context.store.subscribe(...) to manually subscribe to state changes and refresh your current state value in realtime.

use the unsubscriber returned by your context store's subscribe(...) to unsubscribe from the store when needed.

Next: Consuming Context (Using Streams)