ReactiveDict

Documentation of ReactiveDict, a simple reactive dictionary package.

A ReactiveDict stores an arbitrary set of key-value pairs. Use it to manageinternal state in your components, ie. like the currently selected item in a list.Each key is individully reactive such that calling set for a key will invalidate any Computations that called get with that key, according to theusual contract for reactive data sources.

That means if you call ReactiveDict#get('currentList')from inside a Blaze template helper, the template will automatically be rerenderedwhenever ReactiveDict#set('currentList', x) is called.

To use ReactiveDict, add the reactive-dict package to your project by runningin your terminal:

  1. meteor add reactive-dict

Client

new ReactiveDict([name], [initialValue])

import { ReactiveDict } from 'meteor/reactive-dict' (reactive-dict/reactive-dict.js, line 32)

Constructor for a ReactiveDict, which represents a reactive dictionary of key/value pairs.

Arguments

  • nameString

  • Optional. When a name is passed, preserves contents across Hot Code Pushes

  • initialValueObject

  • Optional. The default values for the dictionary

If you provide a name to its constructor, its contents will be saved across HotCode Push client code updates.

Client

ReactiveDict#set(key, value)

(reactive-dict/reactive-dict.js, line 84)

Set a value for a key in the ReactiveDict. Notify any listenersthat the value has changed (eg: redraw templates, and rerun anyTracker.autorun computations, that calledReactiveDict.get on this key.)

Arguments

  • keyString

  • The key to set, eg, selectedItem

  • valueEJSON-able Object or undefined

  • The new value for key

Example:

  1. const state = new ReactiveDict();
  2. state.set('currentRoomId', 'random')
  4. Tracker.autorun(() => {
  5.   Meteor.subscribe('chatHistory', { room: state.get('currentRoomId') });
  6. });
  8. // Causes the function passed to `Tracker.autorun` to be rerun, so that the
  9. // 'chatHistory' subscription is moved to the room 'general'.
  10. state.set('currentRoomId', 'general');

ReactiveDict.set can also be called with an object of keys and values, which isequivalent to calling ReactiveDict.set individually on each key/value pair.

  1. const state = new ReactiveDict();
  2. state.set({
  3.   a: 'foo',
  4.   b: 'bar'
  5. });

Client

ReactiveDict#setDefault(key, value)

(reactive-dict/reactive-dict.js, line 126)

Set a value for a key if it hasn't been set before.Otherwise works exactly the same as ReactiveDict.set.

Arguments

  • keyString

  • The key to set, eg, selectedItem

  • valueEJSON-able Object or undefined

  • The new value for key

This is useful in initialization code, to avoid re-initializing your stateevery time a new version of your app is loaded.

Client

ReactiveDict#get(key)

(reactive-dict/reactive-dict.js, line 152)

Get the value assiciated with a key. If inside a reactivecomputation, invalidate the computation the next time thevalue associated with this key is changed byReactiveDict.set.This returns a clone of the value, so if it's an object or an array,mutating the returned value has no effect on the value stored in theReactiveDict.

Arguments

  • keyString
  • The key of the element to return

Example:

  1. <!-- main.html -->
  2. <template name="main">
  3.   <p>We've always been at war with {{theEnemy}}.</p>
  4.   <button class="change-enemy">Change Enemy</button>
  5. </template>
  1. // main.js
  2. Template.main.onCreated(function () {
  3.     this.state = new ReactiveDict();
  4.     this.state.set('enemy', 'Eastasia');
  5. });
  6. Template.main.helpers({
  7.   theEnemy() {
  8.     const inst = Template.instance();
  9.     return inst.state.get('enemy');
  10.   }
  11. });
  12. Template.main.events({
  13.   'click .change-enemy'(event, inst) {
  14.     inst.state.set('enemy', 'Eurasia')
  15.   }
  16. });
  18. // Clicking the button will change the page to say "We've always been at war with Eurasia"

Client

ReactiveDict#equals(key, value)

(reactive-dict/reactive-dict.js, line 167)

Test if the stored entry for a key is equal to a value. If inside areactive computation, invalidate the computation the nexttime the variable changes to or from the value.

Arguments

  • keyString

  • The name of the session variable to test

  • valueString, Number, Boolean, null, or undefined

  • The value totest against

If value is a scalar, then these two expressions do the same thing:

  1. const state = new ReactiveDict()
  2. // ... 
  3. state.get('key') === value
  4. state.equals('key', value)

However, the second is recommended, as it triggers fewer invalidations(template redraws), making your program more efficient.

Client

ReactiveDict#all()

(reactive-dict/reactive-dict.js, line 229)

Get all key-value pairs as a plain object. If inside a reactivecomputation, invalidate the computation the next time thevalue associated with any key is changed byReactiveDict.set.This returns a clone of each value, so if it's an object or an array,mutating the returned value has no effect on the value stored in theReactiveDict.

Client

ReactiveDict#clear()

(reactive-dict/reactive-dict.js, line 245)

remove all key-value pairs from the ReactiveDict. Notify anylisteners that the value has changed (eg: redraw templates, and rerun anyTracker.autorun computations, that calledReactiveDict.get on this key.)

Client

ReactiveDict#destroy()

(reactive-dict/reactive-dict.js, line 293)

Clear all values from the reactiveDict and prevent it from beingmigrated on a Hot Code Pushes. Notify any listenersthat the value has changed (eg: redraw templates, and rerun anyTracker.autorun computations, that calledReactiveDict.get on this key.)