Providing a default value for optional union

[jrdn91]

This is a bit of a complex one but I have a model that looks like this

const AudioFlicker = types.model("AudioFlicker", {
  title: types.optional(types.string, "AudioFlicker"),
  allowedValueTypes: types.optional(types.array(types.string), [
    "Color",
    "Rgb",
  ]),
  token: types.optional(types.string, ":property:"),
  value: types.optional(types.union(Color, Rgb), {}),
  properties: types.optional(
    types.array(
      types.model({
        title: types.optional(types.string, "Property"),
        token: types.optional(types.string, ":property:"),
        value: types.optional(types.union(Color, Rgb)),
      })
    ),
    [
      {
        title: "Color A",
        token: ":colorA:",
        value: Color.create(),
      },
      {
        title: "Color B",
        token: ":colorB:",
        value: Color.create({ value: "Blue" }),
      },
    ]
  ),
})

Specifically, I'm looking at the properties value.

I want it to default to an array with two objects in the shape I've defined with their value being an instance of a Color model, so that whenever I create a new instance of this AudioFlicker it will have a default properties array with with two objects containing a value equal to a Color model instance.

[jrdn91]

And just as I post that i saw that my value optional didn't have a default value specified so I changed it to

value: types.optional(types.union(Color, Rgb), {}),

and it seems to work.

Is this the correct way of setting up a model like this?

[EmilTholin]

That looks reasonable!

You could also replace the types.optional(types.string, 'default string') values with just 'default string' if you want to save some typing:

import { types as t } from "mobx-state-tree";

// ...

const AudioFlicker = t.model("AudioFlicker", {
  title: "AudioFlicker",
  allowedValueTypes: t.optional(t.array(t.string), ["Color", "Rgb"]),
  token: ":property:",
  value: t.optional(t.union(Color, Rgb), {}),
  properties: t.optional(
    t.array(
      t.model({
        title: "Property",
        token: ":property:",
        value: t.optional(t.union(Color, Rgb), {})
      })
    ),
    [
      {
        title: "Color A",
        token: ":colorA:",
        value: {}
      },
      {
        title: "Color B",
        token: ":colorB:",
        value: { value: "Blue" }
      }
    ]
  )
});