YumJS Reactor Documentation

Reactor, ReactTo, unReact

 

 


Yum has a nice feature where you can add a Reactor() to any element.

Adding a Reactor() allows other elements to subscribe to it using ReactTo(). When one element subscribes to another that has a Reactor() it can then listen for it's specified reactor properties and react accordingly by executing functions sent as parameters named in the call to ReactTo. This makes the subscriber reactive to changes made by the Reactor.

An important note: When using Yum's component syntax, the component comes with one pre-built Reactor but you also have the option to add more. On normal elements you have to add a Reactor to make it subscribable.

Elements can unsubscribe from other elements with Reactors using unReact().

By default the Reactor property that you will be interacting with is the atom.

Let's see how all this works with some code examples.


// For minimal DOM diving get the first H3 element as variable h3
//  and also get one for an H4


const h3 = yum('h3').first;
const h4 = yum('h4').first;


// Create a Reactor on h3

yum(h3).Reactor();



// Define a function to execute when h3 changes
// Pass in reactor here to get the reactor.data (2) in this example, 
// the reactor.subscriber (h3) and the reactor.watch (a);
// Normally you will only need subscriber and data - here we will use those to change
// the text of the h3 (subscriber) with the data 

const runme = function(reactor){
console.log('H4 reacted '+reactor.data);
yum(reactor.subscriber).text(reactor.data)
};



// Set h4 to react to  h3 property a (atom.a)

yum(h4).ReactTo(h3, 'H4', runme, 'a'); // "a" here can be any property you want


// For demonstration purpose, change h3's reactor (atom) property by setting 'a' to 2
// This will cause h4 ro react and execute the "runme" function.
// In real world applications this property can be changed via events, results of 
// data fetches and other function calls.

setTimeout( () => {
const h3 = yum('h3').first;

//fiddle with h3's reactor like this 

h3.atom.a = 2;

},3000);


// unReact to the reactor - useful when you want to stop reacting
// This will unReact to any matching the name 'H4' on object h3.

 yum().unReact(h3, 'H4');



Components can have built in Reactors see HERE

Example:


  yum()._render(App, 'body', { pos: 'before'}); 

Many elements can react simultaneously to one reactor when subscribed and can listen for only the properties they need in order to do their job.

When the Reactor make changes to it's atom based on it's duties and data it receives from other sources and all the subscriber's functions execute and optionally use the data upon receiving those changes.

As you can see setting reactors on elements is useful for making other subscribed elements reactive to changes of the reactor. It's reactivity you are in complete control of.

Questions? Please contact me.