mirror of
https://github.com/meteor/meteor.git
synced 2026-05-02 03:01:46 -04:00
120 lines
3.3 KiB
Markdown
120 lines
3.3 KiB
Markdown
# Reactive Dict
|
|
|
|
A ReactiveDict stores an arbitrary set of key-value pairs. Use it to manage
|
|
internal 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 the
|
|
usual contract for reactive data sources.
|
|
|
|
That means if you call [`ReactiveDict#get`](#ReactiveDict-get)`('currentList')`
|
|
from inside a Blaze template helper, the template will automatically be rerendered
|
|
whenever [`ReactiveDict#set`](#ReactiveDict-set)`('currentList', x)` is called.
|
|
|
|
To use `ReactiveDict`, add the `reactive-dict` package to your project by running
|
|
in your terminal:
|
|
|
|
```bash
|
|
meteor add reactive-dict
|
|
```
|
|
|
|
|
|
<ApiBox name="ReactiveDict" />
|
|
|
|
If you provide a name to its constructor, its contents will be saved across Hot
|
|
Code Push client code updates.
|
|
|
|
<ApiBox name="ReactiveDict#set" instanceName="reactiveDict" hasCustomExample/>
|
|
|
|
Example:
|
|
|
|
```js
|
|
import { ReactiveDict } from "meteor/reactive-dict";
|
|
import { Tracker } from "meteor/tracker";
|
|
import { Meteor } from "meteor/meteor";
|
|
|
|
const state = new ReactiveDict();
|
|
state.set("currentRoomId", "random");
|
|
|
|
Tracker.autorun(() => {
|
|
Meteor.subscribe("chatHistory", { room: state.get("currentRoomId") });
|
|
});
|
|
|
|
// Causes the function passed to `Tracker.autorun` to be rerun, so that the
|
|
// 'chatHistory' subscription is moved to the room 'general'.
|
|
state.set("currentRoomId", "general");
|
|
```
|
|
|
|
`ReactiveDict.set` can also be called with an object of keys and values, which is
|
|
equivalent to calling `ReactiveDict.set` individually on each key/value pair.
|
|
|
|
```js
|
|
import { ReactiveDict } from "meteor/reactive-dict";
|
|
const state = new ReactiveDict();
|
|
state.set({
|
|
a: "foo",
|
|
b: "bar",
|
|
});
|
|
```
|
|
|
|
<ApiBox name="ReactiveDict#setDefault" instanceName="reactiveDict" />
|
|
|
|
This is useful in initialization code, to avoid re-initializing your state
|
|
every time a new version of your app is loaded.
|
|
|
|
<ApiBox name="ReactiveDict#get" instanceName="reactiveDict" />
|
|
|
|
Example in Blaze:
|
|
|
|
::: code-group
|
|
|
|
```html [main.html]
|
|
<template name="main">
|
|
<p>We've always been at war with {{theEnemy}}.</p>
|
|
<button class="change-enemy">Change Enemy</button>
|
|
</template>
|
|
```
|
|
|
|
```js [main.js]
|
|
Template.main.onCreated(function () {
|
|
this.state = new ReactiveDict();
|
|
this.state.set("enemy", "Eastasia");
|
|
});
|
|
Template.main.helpers({
|
|
theEnemy() {
|
|
const inst = Template.instance();
|
|
return inst.state.get("enemy");
|
|
},
|
|
});
|
|
Template.main.events({
|
|
"click .change-enemy"(event, inst) {
|
|
inst.state.set("enemy", "Eurasia");
|
|
},
|
|
});
|
|
|
|
// Clicking the button will change the page to say "We've always been at war with Eurasia"
|
|
```
|
|
:::
|
|
|
|
<ApiBox name="ReactiveDict#delete" instanceName="reactiveDict" />
|
|
|
|
<ApiBox name="ReactiveDict#equals" instanceName="reactiveDict" />
|
|
|
|
If value is a scalar, then these two expressions do the same thing:
|
|
|
|
```js
|
|
import { ReactiveDict } from "meteor/reactive-dict";
|
|
const state = new ReactiveDict();
|
|
// ...
|
|
state.get("key") === value;
|
|
state.equals("key", value);
|
|
```
|
|
|
|
However, the second is recommended, as it triggers fewer invalidations
|
|
(template redraws), making your program more efficient.
|
|
|
|
<ApiBox name="ReactiveDict#all" instanceName="reactiveDict" />
|
|
|
|
<ApiBox name="ReactiveDict#clear" instanceName="reactiveDict" />
|
|
|
|
<ApiBox name="ReactiveDict#destroy" instanceName="reactiveDict" />
|