OVERMIND
v28
v28
  • Overmind
  • Introduction
  • Quickstart
  • How to learn
  • Videos
  • FAQ
  • Core
    • Devtools
    • Configuration
    • State
    • Actions
    • Effects
    • Operators
    • Server Side Rendering
    • Typescript
  • views
    • React
    • Angular
    • Vue
    • Svelte
  • Addons
    • GraphQL
    • Statechart
  • Guides
    • Using state machines
    • Using classes
    • Connecting components
    • Managing lists
    • State first routing
    • Testing
    • Connecting to React Native
  • API
    • action
    • addFlushListener
    • addMutationListener
    • createOvermind
    • createOvermindMock
    • createOvermindSSR
    • derived
    • effects
    • events
    • json
    • lazy
    • merge
    • namespaced
    • onInitializeOvermind
    • operators
    • reaction
    • rehydrate
    • statemachine
Powered by GitBook
On this page
  • Reactive declarations
  • Reactions
  1. views

Svelte

There are two differente ways to connect Overmind to Svelte. You can use the reactive declarations or you can use the reaction.

When you connect Overmind to a component you ensure that whenever any tracked state changes, only components interested in that state will re-render.

Reactive declarations

import { createOvermind } from 'overmind'
import { createMixin } from 'overmind-svelte'

const overmind = {
  state: {
    count: 0
  },
  actions: {
    increase({ state }) {
      state.count++;
    },
    decrease({ state }) {
      state.count--;
    }
  }
}

const store = createMixin(createOvermind(overmind))

export const state = store.state
export const actions = store.actions
<script>
  import { state, actions } from './overmind.js'

  $: count = $state.count
</script>

<p>Count: {count}</p>
<button id="increase" on:click={() => actions.increase()}>Increase</button>
<button id="decrease" on:click={() => actions.decrease()}>Increase</button>

Reactions

import { createOvermind } from 'overmind'
import { createMixin } from 'overmind-svelte'

const overmind = {
  state: {
    count: 0
  },
  actions: {
    increase({ state }) {
      state.count++;
    },
    decrease({ state }) {
      state.count--;
    }
  }
}

const store = createMixin(createOvermind(overmind))

export const state = store.state
export const actions = store.actions
export const reaction = store.reaction
<script>
  import { state, actions, reaction } from './overmind.js'

  $: count = $state.count
  
  let doubled = undefined
  
  reaction(
    (state) => state.count,
    (value) => {
        doubled = value * 2
    },
    {
        immediate: true
    }
  )
</script>

<p>Count: {count}</p>
<p>Doubled: {doubled}</p>
<button id="increase" on:click={() => actions.increase()}>Increase</button>
<button id="decrease" on:click={() => actions.decrease()}>Increase</button>
PreviousVueNextGraphQL

Last updated 4 years ago