RxJS beginner here: I have problems with saving and tracking data changes using RxJS. Say I structure my app in small views/widgets and every view/widget has its own state and should do things on data changes. How do I do that?
More concrete example. Let's say I have a widget called Widget
and Widget
has a title and button. The state should contain the title and the information if the button was already clicked. From reading the docs of RxJS it seems this would be a good starting point:
var widgetState = new Rx.Subject().startWith({
wasClicked: false,
title: 'foo'
});
Now I want to be notified if some data changes:
var widgetStateChanges = widgetState.subscribe(function(data) {
console.log('data: ', data);
// what do i do with the data here?
// i would like to merge the new data into the old state
});
widgetStateChanges.onNext({ title: 'bar' });
I listen to the changes, but I don't know how to save them. I would also like to do special things, if a certain data change happens. Something like this.
widgetStateChanges.filter(function(e) {
return e.wasClicked;
}).do(function(e) {
console.log('Do something because was clicked now.');
});
However I can't filter
a subscription (widgetStateChanges
), only a subject (widgetState
).
Compared to other alternatives like Redux, I've found the use of RxJS and Hooks to be a really effective and straightforward way to manage state in React applications.
React is a javascript library for building user interfaces and makes it painless to create interactive UIs. RxJS is a javascript library for reactive programming using Observables and makes it painless to compose asynchronous or callback-based code.
So much so, that you could say that Reactive Extensions are a lingua franca inside Adaptive. When React came out, it was very challenging to integrate RxJS directly with React. React was essentially pull-based, and that presented a significant impedance mismatch with RxJS observables, which are push-based.
They are very different things. RxJS can be used to do Reactive Programming and is a very thorough library with 250+ operators. And Redux is as described on the github repo "Redux is a predictable state container for JavaScript apps". Redux is just a tool to handle state in apps.
Use a BehaviorSubject
to track observable state:
var widgetState = new Rx.BehaviorSubject({ wasClicked: false, title: 'foo' });
// change state, probably in response to UI events
// Note we always set the full state, not just the "delta"
widgetState.onNext({ wasClicked: true, title: 'foo2' });
// example listening to title input field and updating state
// assumes rxjs-jquery
$("#title").onAsObservable("change").subscribe (function (ev) {
var oldState = widgetState.value;
var newTitle = $("#title").val();
// do not mutate the oldState object, instead clone it and change the title
var newState = $.extend({}, oldState, { title: newTitle });
// send the update
widgetState.onNext(newState);
});
// listen to new state values, probably to update your HTML?
widgetState.subscribe(function (newState) { ... });
// listen only when wasClicked is true
widgetState
.filter(function (s) { return s.wasClicked; })
.subscribe(function (s) { ... });
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With