Connect external observables

[pasha-bolokhov]

I couldn't find a good answer. How to add an external observable to the Store? Obviously, we don't want to track the observable itself (as a reference), because it won't likely change, but we want its data to be joined into our state. RxAngular, for instance, has the connect() method. With Elf/Store, I have to manually add "tap()" on that external observable to update the Store — which is not very reactive…

Here's an example how it would be useful:

store.connect(this.httpClient.get<User>("blablabla"));
username$ = store.query(select("username"));

More importantly, if we did have connect() method, then subscribing to username$ in the template, would trigger the http request. That would be easy and reactive throughout the whole store — starting from the template and all the way to triggering the http request.

However, currently, in Elf/Store we can just subscribe to username$, which subscribes to the store, which triggers nothing… Yes, it will work, because the store will happen to have the value for the username, but it's not reactive / declarative

My feel is that Elf was more fit for React users, who don't really use observables, and they have their own concept of "reactivity". To be more precise, setState() is not reactive, it is imperative. In Angular you're only truly reactive if you're using declarative code all throughout

tap() is not declarative

[NetanelBasal]

Can you show an example of what you expect using Elf?

[pasha-bolokhov]

Hi, that's exactly what I wrote:

store.connect(this.httpClient.get<User>("my.api-service.com"));
username$ = store.pipe(select(({ username }) => username));

RxAngular, for example, has this connect() method.
Then, when you subscribe to it in the template

You are logged in as: {{ username$ | async }}

it triggers the HTTP request.

Let me ask you — does not it seem wrong that you have to tap() an observable's value into the store? This way, it's not very declarative. Some people even advice against ever using tap(), saying that it breaks the declarative flow of data through observables. And I agree to that in the sense that when you subscribe to a value in the store (as it works now) —

You are logged in as: {{ username$ | async }}

this triggers nothing, except for pulling out a value from the store… Maybe I'm missing something?

[NetanelBasal]

It's NOT the responsibility of the store to fetch the data. The store's responsibility is to manage your state.

[NetanelBasal]

Moreover, what if you subscribed to this observable multiple times? Will you trigger the HTTP request again? What about caching if needed? What if you have numerous requests that build your state? Which selector triggers what?

[pasha-bolokhov]

I think you're missing my point again. It might seem that I'm asking for the store to pull or trigger data requests, but I'm really not. I'm merely talking about the flow of data

The HTTP request is just an example. If we talked React then what you're saying is right. Reacters only work with regular Javascript objects and have no clue of the existence of observables. Then storing Javascript objects is enough.

The point is that pretty much all data in Angular is reactive. The store works as a "collection" of various pieces of data. If I think that it is convenient for the username to be part of the store, so I add it to the store. However, I'm sure you know, data changes over time, and the store reflects it by providing select(). It is natural to want to add something that originates from an observable — in a reactive way. That is, no subscribing, or tapping (this can happen internally).

In essence, all I'm asking is to implement the connect() method from RxAngular. I'm surprised no–one else has asked for it, nor has seen a contradiction between having to use tap() and adhering to the declarative approach

Again, the HTTP request is just an example — the user would have to worry about providing a shareReplay()

[pasha-bolokhov]

I'm guessing maybe the name connect() confused you. It merely means "connect this observable to my store, and track it, including errors and completion"

[pasha-bolokhov]

Would you be willing to consider if I implemented this? I mean, technically I'd be repeating a lot of what RxAngular guys did, but I do find it an important feature

[NetanelBasal]

I don't mind to see a POC