CODEWITHSUNDEEP
user-interfacesignalseditormobxmobx-react
Wang Yi
Wang Yi

Reputation: 41

Difference between "Signals" (js-signals) and "Observables" (mobx, mobx-react)?

Could they work together for a perfect states management and bidirectional data binding?

Mobx implements observable pattern in javascript. By using mobx and mobx-react, people can refer mobx observables in react and assign autorun, reaction, and comptued routines to them. Every time an observable changes its references relationship, autorun, reaction and computed routines fired.

This is really helpful when you developed a rich content application, say editor.

While js-signals works differently, a signal can register callbacks and its priority. When a component changes, a programmer have a choice to dispatch the signal to fire all associated callbacks (just like events)

Which pattern is better, could they work together smoothly?

Background

I am working on an editor which uses signals intensively. I also prefer to use observable patterns to manage states of the editor. My personal feelings, when the observable grows up (just like 200 global variables), it becomes hard to maintain.

I am appreciated for your thoughts. Developers who succeeded in using those techniques are welcomed.

Upvotes: 2

Views: 2468

Answers (1)

Joel Harkes
Joel Harkes

Reputation: 11661

js-signals is just an event emitter library and mobx is just a state/observer libary.

You can simply fire and handle events. as long as the handler wraps the changes of mobx State in a mobx.action. the changes in state are handled properly and react components are updated properly/observer events fired properly:

class Store {
  @mobx.observable name = "test"
}
var store = new Store();
//custom object that dispatch a `started` signal
var myObject = {
  started : new signals.Signal()
};
function onStarted(name){
  mobx.runInAction(() => {
    store.name = name;
  });
}
myObject.started.add(onStarted); //add listener

mobx.observe(store,"name",change=> {
  myObject.started.dispatch(change.name+'x'); //woops now we have an infinite loop!
});
myObject.started.dispatch('foo'); //dispatch signal passing custom parameters
// myObject.started.remove(onStarted); //remove a single listener

Upvotes: 0

Related Questions