I'm trying to wrap my head around reactive programming and observables.
What is the reactive way to solve the following scenario?
I have an object with 2 properties.
At anytime, one, both or neither of these properties can be set.
Each of these properties dispach events that I can listen to.
Only when both properties are set I want to listen to their update events and run some kind of aggregation on their properties.
One possible solution is to create a stream from each property and then combine the streams using combineLatest.
combineLatest will not produce a value until both inputs have produced a value. After both inputs have produced a value, the stream will update every time either value changes. See code below:
const property1$ = Rx.Observable.fromEvent(button1, 'click');
const property2$ = Rx.Observable.fromEvent(button2, 'click');
const aggregateWhenBothAreClicked$ = property1$
.combineLatest(property2$)
.map([property1,property2])=>doStuff(property1,property2))
The doStuff function will not be called until both buttons have been clicked. Once both buttons have been clicked, the doStuff function will be called everytime afterwards.
Related
On MixPanel, I track an event like so:
mixpanel.track('Action A')
I allow visitors to undo their actions when filling out a sign-up form. I would like to be able to send another event to undo the previous event:
mixpanel.decrement('Action A')
However, the decrement function in Mixpanel is only available on user properties, not events. I don't have unique_ids on these events because it's server-side and triggered by anonymous users, but I would like the ability to increment and decrement an accurate count of Action A. How can I delete the initial event or decrement the count by 1?
There is no way to delete events that are ingested by Mixpanel with no unique_id's connected to them.
It is possible to hide them so they don't appear in reports, but that sounds like it will defeat the purpose of what you are trying to accomplish.
Mixpanel does have documentation on making an incremental super property, which is tied to events and not people. A super property is a property that is sent with every event. The method mixpanel.register() is what is used to create Super Properties, but it also allows values to be overwritten which is one way to build an incremental/decremental event property.
This unfortunately involves building a function, but it should serve as a workaround. If you are using JS the function would look something like:
//define the incrementing function
incrementer = function(property) {
value = mixpanel.get_property(property);
update = {}
//Ensure that 'value' has a type = number
if(value && typeof(value) == 'number') {
update[property] = value +1;
}
else {
update[property] = 1
}
mixpanel.register(update);
};
There is some documentation on this here.
I think this will involve a little bit of tweaking depending on your implementation, but let me know if that helps solve it.
Another question about ReactiveUi. I have a ViewModel for an edit form. Model is ReactiveObject. I want to enable savecommand only when changes of object was take place. My try:
var canSaveCommand =
this.WhenAnyValue(vm => vm.CurrentClient)
.Where(client => client != null)
.Select(client =>
client.Changed
)
.Any();
But when the form appears the SaveCommand is already enabled. Where my mistake?
You want to use Switch not SelectMany. SelectMany will not unsubscribe from the previous client. It will merge events from all clients. Switch unsubscribes from the previous client before it subscribes to the next.
var canSaveCommand =
this.WhenAnyValue(vm => vm.CurrentClient)
.Where(client => client != null)
.Select(client =>
client.Changed
)
.Switch()
.Any();
For example the following code makes it clear. Let's say we have a class called AudioChannel It generates audio frames we can can process and send to the speaker.
public class IAudioChannel {
public IObservable<AudioFrame> AudioFrameObservable {get;}
}
Then we might have a list of audio nodes that the user can select but we only want the most current sending audio to the speaker. The below class makes available the currently selected audio node as an observable.
public class AudioListViewModel {
public class IObservable<IAudioChannel> CurrentAudioChannelObservable {get;}
}
Now consider the following code
AudioListViewModel viewModel;
viewModel
.CurrentAudioChannelObservable
.SelectMany(current=>current.AudioFrameObservable)
.Subscribe(frame=>frame.Play());
vs
AudioListViewModel viewModel;
viewModel
.CurrentAudioChannelObservable
.Select(current=>current.AudioFrameObservable)
.Switch()
.Subscribe(frame=>frame.Play());
In the first version as we change the selection of audio nodes we add more and more subscriptions. The audio output quickly becomes a garbled mess of mixed channels. In the second version only one channel is subscribed to at a time and the audio output only plays the output from a single channel.
Many people make this mistake when starting out with RX. For example I found a bug in the ReactiveUI framework that used SelectMany instead of Switch.
However
There is a built in way within ReactiveUI to achieve this in a clear way
There is actually another way to achieve what you want and I will put it in another answer just to show you how to use ReactiveUI.
var canSaveCommand =
this
.WhenAnyObservable(vm => vm.CurrentClient.Changed)
.StartWith(false);
Note that null doesn't have to be explicity handled though you should start with false to make sure a value exists when no observable is available to start with.
WhenAnyObservable
WhenAnyObservable acts a lot like the Rx operator CombineLatest, in
that it watches one or multiple observables and allows you to define a
projection based on the latest value from each. WhenAnyObservable
differs from CombineLatest in that its parameters are expressions,
rather than direct references to the target observables. The impact of
this difference is that the watch set up by WhenAnyObservable is not
tied to the specific observable instances present at the time of
subscription. That is, the observable pointed to by the expression can
be replaced later, and the results of the new observable will still be
captured. An example of where this can come in handy is when a view
wants to observe an observable on a viewmodel, but the viewmodel can
be replaced during the view's lifetime. Rather than needing to
resubscribe to the target observable after every change of viewmodel,
you can use WhenAnyObservable to specify the 'path' to watch. This
allows you to use a single subscription in the view, regardless of the
life of the target viewmodel.
Try changing your Select to a SelectMany. That will then give you an Observable of the changes to be passed into Any instead of an Observable of an Observable of the changes to be passed into Any.
I'm novice to RxJS, I'm trying to implement chain of observable that behave exactly like MS-Excel. The concept: Lets assume the excel have 5 columns 'Name', 'Age', 'Sex', 'Country', 'Zipcode'. We can apply filter on each column independently that also affect the records show in the other columns.
Here the data-source receives the data back-end service, the data-source will have only two functions "addRecord" & "removeRecord".
How I'm trying to achieve here lets say I will create Observable and attach to the data-source call it as OBS-1 this will receive data from data-source. The OBS-1 can have its own filters. Lets say I will create another Observable OBS-2 which will receive data OBS-1 (filtered data if any filters in OBS-1). Another Observable say OBS-3 which again receive data from OBS-2 (filtered if any in OBS-2), so on.
If OBS-2 is destroyed (unsubscribed) the OBS-3 will receive the data from OBS-1.
How do we achieve this in the RxJs?
I think you misunderstood a few thing about Rx. Observables do not have filters and you do not 'live' add and remove filters from them. Neither do observables forward data based on who is subscribed.
Instead, you build up a call chain. You start with a source observable, like one from the addRecord and one from the removeRecord event. You then chain these observables to form new observables trough various operators in Rx and eventually you subscribe to the final observable. Subscribing will activate the entire chain and when the source events fire, all operators will trigger and eventually the event will (if not filtered) reach subscribe.
You can actually do the thing you describe in Rx. Changing a filter on an observable for example can be done relatively easy with switchMap, an operator that let you project a sequence onto another and switch over to the new sequence each time. For example filterSource.switchMap(filterFunction => Obs-1.filter(filterFunction)). Even simpler than this, you could just unsubscribe the first subscription and set up the Rx chain again. Using the build in functions however leaves a lot of juggling state out of the equation.
However, i strongly suspect you do not actually need behavior that is this complicated. What you want can be archived simply like this:
var Src-1 = fromEvent(dataSource, 'addRecord') // create the first source
var Src-2 = fromEvent(dataSource, 'removeRecord') // and the other source
var Obs-1 = Src-1.combineLatest(Src-2) // combine both sources
.filter(e => someCondition(e)) // filter the source
var Obs-2 = Obs-1.mergeMap(e => someOtherCondition(e) ? Change(e) : Rx.Observable.of(e)) // on someOtherCondition, either transform the source with the `Change(e)` function. Or keep it unchanged with `of(e)`
var Obs-3 = Obs-2.filter(e => anotherCondition(e)) // Filter again
var sub = Obs-3.subscribe() // activate the sequence.
I'm trying to manually set an error on a computed observable using Knockout Validation but the validation message isn't displaying. I need to be able to set the error after apply bindings has been called and the group set.
var viewModel = {
computedTest: ko.computed(function(){
return 'Test'
})
};
viewModel.errors = ko.validation.group(viewModel);
ko.applyBindings(viewModel);
viewModel.computedTest.extend({ validatable: true });
viewModel.computedTest.setError('oops');
viewModel.errors.showAllMessages(true);
Using this example a validationMessage doesn't get displayed for the computedTest observable.
I believe the reason is because the validation group hasn't doesn't know that computedTest is now extended. But I'm not sure how to refresh the group so that the error message is displayed.
Here's a better example: https://jsfiddle.net/onbyc67h/.
As you can see if you set the .extend({ validatable: true }) before applyBindings is run a message is displayed, but if you do it after one isn't.
Thanks
What is going on is completely logical: when you apply bindings, the different bound properties are subscribed to changes of existing observables. So, if you create a new observable after binding, there is no way for ko to discover and subscribe to it. Take into account that what the validation extenders do is creating new observables, which can be subscribed. But, if you create them after binding, as explained, they can not be subscribed by the binders.
The only thing that you could do would be to unbind and rebind, but this is not advisable at all.
I have a node.js-based location service that produces events as users move about, and I want to use RxJS to process these events and look for arbitrarily complex patterns like a user enters a region and visits 2 points of interest within 1 hour.
To begin with I need to split the stream of events base on unique user ids (from event body), but I am not finding any stock RxJS functions that will do this.
filter() would require that all uuids be known beforehand which is not desirable.
groupBy() looks like it would need to process the entire sequence prior to returning the grouped observables, which is not possible.
I'm thinking that maybe I need to build a custom observable that maintains a map of uuids to observables, and instantiate new observables as required. Each of these observables would then need to undergo identical processing in search of the pattern match, and ultimately trigger some action when a user's movements match the pattern. One of the obvious challenges here is I have a dynamically growing map of observables being produced as user enter the system and move about.
Any ideas how something like this could be achieved with RxJS?
I think you are misunderstanding how groupBy() works. It will generate a new Observable every time a new key is generated, and if the key already exists, it will just be pushed to the existing Observable.
So for your problem it should look something like this:
var source = getLocationEvents();
var disposable = new Rx.CompositeDisposable();
disposable.add(
source.groupBy(function(x) { return x.userid; })
.map(function(x) {
return x.map(function(ev) { /*Process the the event*/ });
})
.subscribe(function(group) {
disposable.add(group.subscribe(/*Do something with the event*/));
});