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.
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.stateexport 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>
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.stateexport const actions = store.actionsexport const reaction = store.reaction
<script>import { state, actions, reaction } from './overmind.js'​$: count = $state.countlet doubled = undefinedreaction((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>