編集

コレクションユーティリティ {🚀}

オブザーバブル配列、オブジェクト、マップの操作を同じ汎用 API を使用して可能にします。これらの API は完全にリアクティブであり、つまり、Proxyサポートなしでも、setを使用してそれらを追加し、valuesまたはkeysを使用してそれらをイテレートする場合、MobXによって新しいプロパティ宣言が検出されることを意味します。

values、keys、およびentriesのもう1つの利点は、イテレータではなく配列を返すことで、結果に.map(fn)をすぐに呼び出すことができるなど多くのことができます。

そのすべてを踏まえて、一般的なプロジェクトでは、これらの API を使用する理由はほとんどありません。

アクセス

  • values(collection)はコレクション内のすべての値の配列を返します。
  • keys(collection)はコレクション内のすべてのキーの配列を返します。
  • entries(collection)はコレクション内のすべてのエントリ[key, value]ペアの配列を返します。

変換

  • set(collection, key, value)またはset(collection, { key: value })は、指定されたコレクションを指定されたキーと値のペアで更新します。
  • remove(collection, key)は、コレクションから指定された子を削除します。スプライシングは配列に対して使用されます。
  • has(コレクション, キー)はそのコレクションに指定のobservableプロパティがある場合、trueを返します。
  • get(コレクション, キー)は、指定のキーにある子を取得します。

Proxyがサポートされていない環境でアクセス API を使用している場合は、変化を検出できるように、mutation API も使用してください。

import { autorun, get, set, observable, values } from "mobx"

const twitterUrls = observable.object({
    Joe: "twitter.com/joey"
})

autorun(() => {
    // Get can track not yet existing properties.
    console.log(get(twitterUrls, "Sara"))
})

autorun(() => {
    console.log("All urls: " + values(twitterUrls).join(", "))
})

set(twitterUrls, { Sara: "twitter.com/horsejs" })
← 遅延オブザーバブル {🚀}インターセプトおよびオブザーブ {🚀} →