Svelte

Search…
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>
views - Previous
Vue
Next - Addons
GraphQL
Last modified 1yr ago
Copy link
Outline
Reactive declarations
Reactions