Skip to content

Reactive state

Reactive object

It’s an object that holds the mutable state of your application and is made reactive by Vue.js. This means that Vue.js can automatically track changes to this state and update the DOM when the state changes. In order to use it, add a new "reactive" key to your machine structure.

typescript
const machine =  createMachine('counter-machine', {
  initial: "INITIAL",
  reactive: {
    checkbox_checked: false,
    times_clicked: 0
  },
  state: {
    INITIAL: { /* (...) */ },
    AGREED: { /* (...) */ }
  }
})

You can read and mutate reactive object directly from the machine:

typescript
machine.reactive.times_clicked += 1

or using this context of some action:

typescript
INITIAL: {
  handleCheckboxClick(value: boolean) {
    this.$reactive.checkbox_checked = value
  },
  showConfirmModal() { /* (...) */ }
}

⚠️ Returning reactive state from an action

Due to typescript limitations, if you want to return reactive state from an action, you have to specifically set the return type of it. Like in example below:

typescript
createMachine('some-machine', {
  initial: "INITIAL",
  reactive: {
    counter: 1
  },
  states: {
    increment(num: number): number {
      this.$reactive.counter += number
      return this.$reactive.counter
    }
  }
});

Resetting reactive to its initial state

To reset reactive to its initial state, you can either call this.$resetReactive() in some action

typescript
const machine = createMachine('some-machine', {
  initial: "INITIAL",
  reactive: {
    counter: 1
  },
  states: {
    reset() {
      this.$resetReactive()
    }
  }
});

or directly on machine instance

typescript
machine.resetReactive()