ReactiveVar vs Dict?

help
1

Please explain how to use ReactiveVar vs ReactiveDict???

2 Likes
2

The important things you need to be aware of for ReactiveDict:

– ReactiveDict works similarly to Session. In fact Session is a convenience notation: if you look at the source code for Session, you will see:

Session = new ReactiveDict('session');

– You choose whether to implement as a global instance (like Session is) or local to a functional scope (for example in a Template onCreated).

thing = new ReactiveDict('thing'); // Global
var otherThing = new ReactiveDict('other'); // Local

– If you give a ReactiveDict a name it will survive a hot code push:

var thing = new ReactiveDict('thing'); // This will survive
var otherThing = new ReactiveDict(); // This will not

– ReactiveDicts may only contain JSON-able/EJSON-able things and one ReactiveDict may reference many things:

var thing = new ReactiveDict('thing');
thing.set({a:12,b:'bob'}); // Creates entries for a and b. Does the same as this:
thing.set('a', 12);
thing.set('b', 'bob');
// However, you cannot do something like this:
thing.set('f', function() {...}); // Where ... is some code
// Or this:
thing.set({f:function() {...}});

– Setting the value of a ReactiveDict's key to the same value it currently holds will invalidate the computation.

The important things you need to be aware of for ReactiveVar:

– You choose whether to implement as a global instance or local to a functional scope (for example in a Template onCreated).

myVar = new ReactiveVar(99); // A global var with an inital value of 99.
var myOtherVar = new ReactiveVar('bob'); // A local var with an initial value of 'bob'.

– ReactiveVars do not survive hot code pushes
– A ReactiveVar may only take one value (it may be an object).
– ReactiveVars may contain any data type:

var a = new ReactiveVar(1); // a has the value of 1
var b = new ReactiveVar('bob'); // b has the value of 'bob'
var c = new ReactiveVar({a:12,b:'bob'}); // c has the value of {a:12,b:'bob'} - it's an object
var f = new ReactiveVar(function(x) {
  return x * x;
}); // f is a function
// You can now execute that function:
var y = f.get()(5); // y is set to 25.

– Setting the value of a ReactiveVar to the same value it currently holds does not invalidate the computation.

7 Likes
3

Thanks for this @robfallows. I just learnt a couple of things. Great comprehensive summary!

4

really nice explanation, reminds me of flow-components props :smiley:

5

Very thanks for your explain.