Get the current value from store instantly

[peterbakonyi05]

Hi,

Some cases it would be useful to get the current value from the store instantly. Imagine that you react to a button click, and in order to dispatch an action you need some value from the store.

Currently you need to do this:

onLoginClick(loginData) {
    this.store.select(this.selector.getCountry())
        .take(1)
        .subscribe(country => {
            this.store.dispatch(this.action.login({
                loginData,
                country 
            }));
        });
}

With a get method it could be done like this:

onLoginClick(loginData) {
    this.store.dispatch(this.action.login({
        loginData,
        country: this.store.get(this.selector.getCountry())
    }));
}

The performance would be even better, because just to get the current value, you don't need to create a new Subscription. Do you think it makes sense to introduce a method like that on the Store?

[michaelgeorgeattard]

👍

[brendanalexdr]

Yes, such a "get" function would be helpful. Or it could called "snapshot," in the same way as you get a snapshot of the current values of the ActivatedRoute

[berndartmueller]

+1 for snapshot

[robwormald]

We had this API in v1 of Store, and we removed it as people we basically abusing it. It's unlikely we'll add this API back in. The performance cost is near zero.

Store will always deliver you values synchronously, fwiw.

[aph5nt]

But what if the 'onLoginClick' function depend on many values stored in the store (eg. country, state, street ...)? Having a snapshot functionality would really simplify things there.

[peterbakonyi05]

Hey,

if you really need this feature you can patch the store with this functionality. Ofcourse it would be cleaner to have this functionality in @ngrx/store. This is what we ended up doing:

import { Subscription } from "rxjs/Subscription";
import { Store } from "@ngrx/store";

declare module "@ngrx/store/src/store" {
	interface Store<T> {
		getSync: typeof getSync;
	}
}
let subscriptions = new WeakMap<Store<any>, Subscription>();
let currentStates = new WeakMap<Store<any>, any>();

/**
 * Runs the given selector and returns the current value synchronously from the store.
 */
export function getSync<TState, TResult>(this: Store<TState>, selector?: (state: TState) => TResult): TResult {
	if (!subscriptions.get(this)) {
		subscriptions.set(this, this.subscribe(data => {
			currentStates.set(this, data);
		}));
	}

	const state = currentStates.get(this);
	return selector
		? selector(state)
		: state;
}

[fxck]

@aph5nt you are not thinking reactive enough

onClick$ = new Subject<Whatever>();

constructor(private _store: Store<AppState>) {
  this.onClick$
    .withLatestFrom(this._store)
    .subscribe(([data, state]) => {
      // do whatever you want here
    });
}

<button (click)="onClick$.next({ foo: 'bar', baz: $event })">click</button>

common use-case for this is when you map these handlers to ngrx actions, merge them and subscribe them to your store, which means that clicking button will essentially dispatch an action to the store, see #173 (comment)

[kylecordes]

This pattern @fxck showed is very useful, very often. There is an issue over on the main Angular repo discussing possible syntax for a future feature built in that would expose events from the template as observables. (However, as I vaguely recall from reading the thread, none of them really save any lines of code compared to this pattern shown above.)